I am trying to get this script to autofill another field while the original field is being filled in. But the second field loses the last character of its value. Any ideas why?
Here is the code...
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">
$(".first").on('keydown',function(){
$(".second").val($(this).val());
});
http://jsfiddle.net/fmdwv/1/
The keydown event fires before the value is updated, so when you read it, you get the value before it has been changed by the key being pressed.
Use the input event instead (that will also fire after a paste).
$(".first").on('input', function() {
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">
The onkeydown event occurs when the user is pressing a key
The onkeyup event occurs when the user releases a key
The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
in your case onkeydown it execute function first .so on execution values inside input is not updated with pressed key value so it fires before value inserted
checkout this example
$(".first").on('keyup',function(){
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">
Related
Is there a way to catch when the user hits "done" on the input text field?
I want to call a function when the user closes the textfield but I could not find how
You can use onblur or focusout events.
<input type="text" onblur="myFunction()">
or
<input type="text" onfocusout="myFunction()">
I have several html input controls on a page and a search button. When user is outside the input controls, ( ie focus is not inside the input control) and if user press enter, i want to trigger click event of search button. The search button is not a Submit button and it is not inside a form
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
currently I am doing this
$(document).keypress(function (event) {
if (event.keyCode === 13) {
$("#btnSearch").click();
}
})
However, the above code triggers click event every time user clicks enter.
Some of the input controls I have are custom autocomplete controls. Auto complete control shows multiple options as soon user starts typing something. Then user can select the option by using mouse or by pressing enter.
I don't want to trigger the click event of a search button when user press enter to select an option.
Just make sure that the autocomplete element isn't the source of the enter press. From the demo you give in your question, this will work. However, if it is slightly different in your use case, you may need to adjust the class name or selector to make sure it is preventing the correct target element
$(document).keypress(function (event) {
if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) {
$("#btnSearch").click();
alert('btnSearchClick');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
Alternatively, since events propagate out, if you can prevent the propagation of the autocomplete event in whichever library you are using, that may work as well.
I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>
I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).
I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.
How to get whether the Enter is pressed?
$('input.the-one-text-input').keydown(function(e) {
if(e.keyCode == 13) { // enter key was pressed
// run own code
return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
}
});
Also note this comment on that page:
** If anyone has reached this from Google (like I did), know that "keyup" instead of "keypress" works in Firefox, IE, and Chrome. "keypress" apparently only works in Firefox.
Which isn't 100% correct anymore, since it also works works in Chrome. However it wouldn't surprise me if it still doesn't work in IE.
http://jsfiddle.net/yzfm9/9/
Basically check which input is focused and do custom stuff depending on it
HTML
<form id="nya">
username <input type="text" id="input_username" /><br/>
email <input type="text" id="input_email" /><br/>
hobby <input type="text" id="input_hobby" /><br/>
<input type="submit" />
</form>
JS
$('#nya').submit(function() {
var focusedId = ($("*:focus").attr("id"));
if(focusedId == 'input_email') {
// do your custom stuff here
return false;
}
});
Returning false when enter is pressed on "onkeydown" will disable the default behaviour. Then you can just call your function on the "onkeyup" event.
<input type="text"
onkeyup="myFunction()"
onkeydown="return event.keyCode != 13;"/>
Just had a play with jQuery's .keypress() method and it looks like it does the job.
HTML
<form method="post" action="">
<input type="text" name="submit1" id="submit1" />
<input type="text" name="noSubmit1" id="noSubmit1" />
<input type="text" name="submit2" id="submit2" />
<input type="submit" />
</form>
JQuery
$('#noSubmit1').keypress(function(event) {
if (event.which == 13 ) {
event.preventDefault();
}
});
It basically adds a keypress event to the correct input field, then checks for which key was pressed. If it was the enter button (13), it then prevents the default action (form submission) from happening. See it in action here: http://jsfiddle.net/cchana/UrHz7/2/
I have a text area form like this one:
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur" size="8" maxlength="40" value=""></td>
and a Checkbox next to it:
<input type="Checkbox" id="cb0" name="innsent" tegund="val" gildi="eink" value="0" number="0" parents="1" onclick="hakaVid(this)">
I want the checkbox to be filled when some text is written in the text area. And when the user deletes all the text from the textbox, I want the checkbox to update immediately
How can I possibly do this ?
Attach an onKeyUp event handler to the <input> and modify the checkbox's value according to this.value.length.
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur"
size="8" maxlength="40" value=""
onkeyup="document.getElementById('cb0').checked = this.value.length > 0;">
Example: http://jsfiddle.net/qG5Cu/
UPDATE You might be interested on using the onInput event handler instead of onkeyup. See this link for more information: Using the oninput event handler with onkeyup/onkeydown as its fallback
I guess you should try with input events, check w3c:
input tag