This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I ran into another problem with JS created inputs. I want the input to focus on the next one as soon, as it gets filled. So I write a number -> boom I'm on another input. I found this code, already posted on StackOverflow:
var inputs = $(':input').keypress(function(e){
if (e.which == 13) {
e.preventDefault();
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
}
});
Which I edited to:
var inputs = $(':input').keypress(function(e){
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
});
It works fine. Until I ad new inputs with JS createElement() function. Then it always stops on the last input that was on the page right after load.
Any solutions?
You can follow my work here.
Thanks!
Because when you call $(':input').keypress(); The input (that you create by the JS method createElement()) was not created yet so of course it will not have the keypress event.
There are some solutions for you. The easiest way is use delegated event handler. You can see how to use it here
Thank to the feed back of #Rory McCrossan
Related
Javascript noob here. A bit stuck with respect to a mfa input field verification I'm trying to implement for my web app.
Instead of having the user hit the "Submit" button after they enter an mfa code in the input field, I want to simply fire my backend service when the field length reaches 6 characters. I've seen this done elegantly on a number of sites.
In my case it fires the lambdas function 4 times in a row when I click out of the field. I can't quite get my head around why it's firing 4 times, as opposed to once?
My assumption is because I'm trying to account for keyup, keypress, blur, and change simultaneously? By doing so I was trying to factor for multiple user behaviors, for example: loss of field focus, a tab out of the field, or an "enter" key press.
$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup keypress blur change", function() {
var $el = $(this);
var code = $el.val().replace(/[^\d]/g, '');
if (code.length === 6) {
lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
}
});
Answering my own question, thanks to a comment from #camillo!
It turns out having multiple .on functions would run the call multiple times. By adjusting the on function to only contain "keyup" it worked as intended.
$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup", function() {
var $el = $(this);
var code = $el.val().replace(/[^\d]/g, '');
if (code.length === 6) {
lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
}
});
This question already has answers here:
Prevent line/paragraph breaks in contentEditable
(11 answers)
Closed 2 years ago.
How can I prevent the user from writing a new line with the enter key in a contenteditable div?
So far I have tried (the id of my editable div is editable:
$('#editable').on('keyup', function(e) {
if (e.which == 13) {
event.preventDefault();
}
});
However this does not work.
Is this possible using JS and jQuery?
Edit
I have been informed that pressing enter does not insert a new line so I have put a picture showing when happens when I press enter inside the editable div.
I would like code to remain on one line basically, even if the user presses enter.
Instead of keyup, use keydown.
const ediatble = document.querySelector('#editable');
ediatble.addEventListener('keydown', e => {
if (e.key === 'Enter') {
e.preventDefault();
}
});
See example on JSFiddle
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
<input id="ok" />
$('.hor-minimalist-a').on('blur','#ok',function(){
});
with this code above, i can handle events which fire If i leave the input field.
How can I detect if someone clicks outside of inputfield without coming to input. I mean the user never came to this input field before, so there was no focus at all.
$('.hor-minimalist-a').on('?','#ok',function(){
?
});
$(document).on('click', function(e) {
if ( e.target.id != 'ok' ) {
// you clicked something else
}
});
That would capture any click except on the input, but why would you need it ?
To capture only clicks on .hor-minimalist-a and not the entire document, just replace document with that selector in the code above.
How about:
$('.hor-minimalist-a').on('click',':not(#ok)',function(){
That'll register click events within .hor-minimalist-a but outside the input #ok
There is a jquery plugin for that:
http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/
I don't usually like to bother you all but I'm stuck on something and I can't find an answer anywhere, hope you guys can help me out!
I'm building a web app and designing it so the interface matches iOS7.
http://danj.eu/webdesign/new
I've got an input form, and I need the button to submit the form to only turn blue and become selectable once the validation has completed. I've wrote some JS to validate the input but this only runs once! I need to run the function every time the user modifies the value of the input.
This is what I've got so far for the JS:
function validateInput(){
if (document.getElementById('projectname').value.length < 2)
document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
document.getElementById('forwardbutton').style.color = "#0e81ff";
}
Thanks guys!
add to your input onchange listener:
var input = document.getElementById("myInput");
input.addEventListener('change', validateInput, false);
this will fire validateInput function every time the value changes.
PS. you should cache your DOM elements that you get in your validation function, because it's searching through the DOM to find them always when function is fired- this can be heavy in a big DOM tree
jsFiddle Demo
You can bind to the input event using jquery which handles virtually all input events simultaneously
<input id="myInput" type="text" />
<div id="output"></div>
js
$('#myInput').bind('input',function(){
if( this.value.length < 2 ){
document.getElementById('output').style.color = "#c4c4c5";
}else{
document.getElementById('output').style.color = "#0e81ff";
}
$('#output').html(this.value);
});
I do not know if you are opposed to jQuery, but I'll provide the jQuery way of doing this. It's very simple with jQuery. You'd use a keyboard event handler, specifically the Key Up event handler.
In your event handler, you'd then check the length of the field and based on the length you would set the enabled or disabled state of the button.
$('#input-element').keyup(function () {
if (document.getElementById('projectname').value.length < 2)
document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
document.getElementById('forwardbutton').style.color = "#0e81ff";
}
});
You can also use jQuery to set the color or enabled state as well, instead of your previous code. Up to you.
Do you mean
function validateInput(){
if (document.getElementById('projectname').value.length < 2)
document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
document.getElementById('forwardbutton').style.color = "#0e81ff";
}
and then perhaps this?
document.getElementById('projectname').onchange=validateInput;
More information would be helpful.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do you handle oncut, oncopy, and onpaste in jQuery?
$(document).ready(function() {
$('#Description').bind('keyup', function() {
var characterLimit = 350;
var charactersUsed = $(this).val().length;
if (charactersUsed > characterLimit) {
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}
});
});
http://jsfiddle.net/qCasN/
This is my code. I am trying to paste some content in description box using mouse right click paste, but it is not handled by the code. I don't know where it goes wrong, can anybody help on fixing this for me.
Thanks in advance
You should use change or input events instead of keyup. If you don't mind little performance loss you could do:
$('#Description').bind('keyup change input', function () { .. });
http://jsfiddle.net/3HdAd/
You'll need to use the mouseup event, instead of the keyup event. keyup is for keyboard actions.
I am not sure if the page will receive a mouseup event from a context menu, though. (right-click -> "paste" makes you click a "paste" button on a non-DOM element.
Or the events Miszy suggested would be a better choice.
you can use onpaste event to handle this :-
$("#Description").bind("paste", function(){} );
check this link :- How do you handle oncut, oncopy, and onpaste in jQuery?
you can use the default jquery keyup event like below:
var characterLimit = 360;
$("#Description").keyup(function(){
if($("#Description").val().length > characterLimit){
$("#Description").val($("#Description").val().substring(0,characterLimit));
}
});
or you can use keydown event as
var characterLimit = 360;
$("#Description").keydown(function(){
if($("#Description").val().length > characterLimit){
return false;
}
});