I want to change a input text size when I change its value.
I have this javascript:
jQuery(document).ready(function ($) {
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
document.getElementById("uploadBtn").onchange = function ()
{
document.getElementById("uploadFile").value = this.value;
$("#uploadFile").attr('size', $("#uploadFile").val().length);
};
});
First, I have test $('input[type="text"]') with resizeInput function. But it doesn't work.
Next, I have added that function to document.getElementById("uploadBtn").onchange = function () but it also doesn't work.
I want to resize input field uploadFile when I do this:
document.getElementById("uploadFile").value = this.value;
How can I auto-scale an input size when I assign it a new string? Now it is autoscaling but it changes input's size with string characters count, and this is not what do I want to do.
I have used this SO answer as inspiration.
I have added this JSFiddle but I'm getting an error.
Try this: change size value as per length of value entered.
$(function(){
$("input[type='text']").keyup(function(){
var value = $(this).val();
$(this).attr("size",value.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Actually your code should work. You have define javascript function inside document.ready, just move it outside or make it jquery function.
jQuery(document).ready(function ($) {
$("input[type='text']").keyup(resizeInput);
});
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Related
Check the html code bellow. The id foo input taking a text then cloning to another input id doo. As you can see in jquery code i am simply passing the value from foo to doo. But my problem is when i try to get value of doo on second part of code in jquery i dont get updated value of doo. Thing is that if i write input in foo then it virtually displays in doo but in real this not changing i think. So what i want is- when i pass input in foo it will also trigger in doo value. Since i am also updating doo from foo. Ask question if you want to know anything more. Thanks in advance
jsfiddle link
Jquery:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
});
$("#doo").on("change paste keyup", function () {
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
Html:
<input type="text" id="foo" value=""><br>
<br>
<input type="text" id="doo" value=""><br>
The problem is that the functions are running at the same time and the value of doo hasn’t changed in time for the function. I would change your js code to this:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
$("#doo").on("paste keyup", function () {
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
});
And then obviously run whatever you would run in both places where you have the var tryGetNewValue running
The change event does not get triggered because only input directly from the user into the element can set it off (see https://developer.mozilla.org/en-US/docs/Web/Events/change).
As for a way to allow this to work, you can use a function for each event like so:
$("#foo").keyup(function () {
$('#doo').val($(this).val());
changeEvent();
});
$("#doo").on("change paste keyup", function () {
changeEvent()
});
function changeEvent(){
var tryGetNewValue = $('#doo').val();
console.log(tryGetNewValue);
}
It's better use deligate function of jquery. Both function change both input values.
$(document).on("input paste keyup","#doo,#foo", function (e) {
$("#foo").val($(this).val());
$("#doo").val($(this).val());
var tryGetNewValue = $(this).val();
console.log(tryGetNewValue);
});
You can even get same thing like below to
$( "body" ).delegate( "#doo, $foo", "input paste keyup", function(e) {
$("#foo").val($(this).val());
$("#doo").val($(this).val());
var tryGetNewValue = $(this).val();
console.log(tryGetNewValue);
});
How to convert int to double using jquery or javascript when user enter input value?
Here when user enter the input it automatically convert into double values.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="TextBox1">
<script type="text/javascript">
$(document).ready(function(){
var decimalNumber = document.getElementById('TextBox1').value;
var integerNumber = parseFloat(decimalNumber);
</script>
</body>
</html>
You have not closed the dom ready function. });
There is another problem as well, at the document.ready function, the value of the input will be blank. Which causes error.
$(document).ready(function () {
$("input").change(function () {
var decimalNumber = document.getElementById('TextBox1').value;
var integerNumber = parseFloat(decimalNumber);
alert(integerNumber);
});
});
Here I have binded a change event to the text box.
Fiddle
I am unclear of what you need ,but this should help.
$(document).ready(function () {
$("input").change(function () {
var d= document.getElementById('TextBox1').value;
d=parseFloat(d);
var i = d.toFixed(2);
alert(i);
});
});
Also close the document ready function.
I'm trying to figur out how I can set the var number and then use it in my other function Custom.init(number); and make it stay on the page.
//Set number onclick
function setVar() {
var number = document.getElementById("textbox").value;
//Pass in number
jQuery(document).ready(function() {
Custom.init(number);
});
};
If you're using jQuery, the ready function should wrap all other functions as it will be invoked first and foremost.
$(document).ready(function(){
var number = document.getElementById("textbox").value;
//Then do your validation here
var setVar = function(){
Custom.init(number);
//whatever else is involved with this
}
})
If that doesn't work I'd check the console for a specific error and ensure your Custom.init function is working as expected.
It doesn't make sense to hide the ready handler inside a function. The comments in your code do also suggest that you wish to call Custom.init in response to a mouse click on some element. You would register an event handler to this end.
A suggested streamlining:
//Set number onclick
$(document).ready(function() {
$(<selector for clickable elements>).on (
"click"
, function (eve) {
Custom.init(parseInt($("#textbox").val()));
1;
}
);
});
I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});
In jquery-events: Click function
I have a webpage with search textbox and another textbox ( called textbox1).
When I search a name, I get a table in the same page with all relevant names in the NAME column with some additional information. This column can have 1, 2... 100 rows.. according to the search keyword. What I want to do is the following:
When I click on the cell of one of the results, I want its value to be copied into textbox1.
I tried the following but it can't seem to work:
<script type="text/javascript">
$(document).ready(function () {
$("td").click(function () {
$(this).attr("id", "td1");
$("#textbox1").val(td1.innerHtml); // I also tried $("#textbox1").val(this.innerHtml);
});
});
</script>
You almost had it, it's just .innerHTML (case-sensitive) instead:
$(document).ready(function () {
$("td").click(function () {
this.id = "td1"; //no need for .attr() here either!
$("#textbox1").val(this.innerHTML);
});
});