is it possible to find out from (jquery) change event handler what triggered the change event - keypress of which key or mouse click?
My use case: I have dynamic list of input[type=text] items, if user fills last empty item I add new input[type=text] for another item. I want to auto-focus it if user pressed tab (which triggered the change event), but not for example when user clicked somewhere (so the change is aslo triggered, but user may want to focus something else).
Simplified example:
https://jsfiddle.net/yxu82p1o/1/
<input type=text>
<script>
function addMore() {
$('input').off('change.addMore');
$('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);
</script>
PS. I can figure out workarounds like attaching another keyup event and figuring out pressed key from it, but it would be much simpler and cleaner to find out from change event what caused it.
This might be an option. Listen for the keydown event on the input elements and if the TAB key triggered the event and the element is an input element trigger the change event on the input element. Then focus the dynamically added input element.
function addMore() {
$('input').off('change.addMore');
$('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);
$('body').on('keydown', 'input', function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9 && this.tagName === "INPUT") {
e.preventDefault();
$(this).change();
$(':text').last().focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type=text>
Related
I have two text inputs and a button.
For both text inputs, I set a keydown event with JQuery to switch focus to the next element on pressing Enter.
So:
Pressing Enter while in the first input should focus to the second input.
Pressing Enter while in the second input should focus to the button.
var counter = 0;
function Foo()
{
$('#output').html(++counter);
}
function FocusToLastName(evt)
{
var keyCode = evt.keyCode || evt.which;
if (keyCode==13) $('#lastname').focus();
}
function FocusToButton(evt)
{
var keyCode = evt.keyCode || evt.which;
if (keyCode==13) $('#btn').focus();
}
$('#firstname').on('keydown',FocusToLastName);
$('#lastname').on('keydown',FocusToButton);
$('#firstname').focus();
#output { color:#0f0; background:#80f; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='firstname' type='text'>
<input id='lastname' type='text'>
<button id='btn' onclick='Foo()'>OK</button>
<h1 id='output'></h1>
To see what happens:
Click on first input field to set focus there.
Press Enter. Focus will move to second input field (correct).
Press Enter again. Focus will move to the button (correct) however the button's onclick event is also triggered (NOT correct)
Note that this only happens when I use the Enter key. If I change the keyCode condition to 40 instead of 13 (for cursor key down ↓ instead of Enter) in both event handlers, it works as expected.
Additionally, another small problem: I automatically focus to the first input element which doesn't seem to work. But that may be related to JSFiddle.
You need to stop the default event. Use the event.preventDefault() method to do so in your focus to button function like so :
function FocusToButton(evt)
{
evt.preventDefault();
var keyCode = evt.keyCode || evt.which;
if (keyCode==13) $('#btn').focus();
}
It would be a good idea to add it to other functions as well. Read more on preventDefault() here
I am trying to stimulate pressing enter in my html table as being the same as focusout, which currently saves new data and leads to other events upon focusout happening. I do not want to use an input box as I want the table to look streamlined. My table cells are content editable. Here is what I have but I cannot get my key press to be connected to the div.
//--->make div editable > start
$(document).on('click', '.row_data', function(event)
{
event.preventDefault();
if($(this).attr('edit_type') == 'button')
{
return false;
}
//make div editable
$(this).closest('div').attr('contenteditable', 'true');
//add bg css
$(this).addClass('bg-warning').css('padding','5px');
$(this).focus();
$(this).attr('original_entry', $(this).html());
})
//--->make div editable > end
Here is what I'm trying to use to stimulate the enter key being pressed leading to a focusout event
$('.row_data').keypress(function(e){
if(e.which == 13){
$(this).blur();
}
});
I cannot tie the blur event to my row_data div. Any suggestions? Currently the enter key only presses tab inside the textbox in the table.
Doesn't look like you are listening for the keypress on the same element.
$('.row_data').closest('div').attr('content editable', 'true')
vs.
$('.row_data').keypress(...)
try:
$('.row_data').closest('div').keypress(...)
when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?
$('input').on('input change',function(){
//do something
});
$(function(){
$('#onchange').on('change',function(){
alert('changed')
});
$('#onEveryLetter').on('input',function(){
alert('onEveryLetter')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
onchange: <input type="text" id="onchange" name="Jenish" />
<br/>
onEveryLetter: <input type="text" id="onEveryLetter" name="Jenish" />
Simply remove the change event from your code. The change event is fired onblur, but only if something has been changed since it was last blurred.
Use:
$('input').on('input',function(){
//do something
});
Jenish's answer is correct. What's more... For those who are using a delegated listener like jQuery .on(), Here is an example that allows you to capture all the change events on the other form elements (textarea, select, etc) and ignore the change event triggered by a blur on text INPUTs.
$('div').on('input change',function(e){
// This will keep the text INPUT from triggering for change event on blur.
if(e.type == 'change' && e.target.nodeName == 'INPUT') {
return false;
}
// Text INPUTs still pick up on the input event here
});
How do I add an event listener to a jEditable input?
By default the ENTER key is used to submit, but I need to have other keys as well to submit value?
$('.editable').editable(function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
width: "100%"
onblur: 'submit'
});
You could add a keypress event listener to the document to listen for those additional keys being pressed.
jEditable adds a form with a class of editable to the page whenever you start to edit something. Using .on() to register the event listener will make sure the handler gets fired even when the form block is added to the page dynamically.
Here's a working example.
This just shows how you can determine when "space" or "#" are pressed. You'll have to modify the code to work for you.
<form class="editable">
<input type="text" class="editable" />
</form>
$(document).ready(function() {
$('form.editable').on('keypress', function(e) {
if (e.keyCode === 32 || e.keyCode === 35) alert('Time to submit!');
});
});
Jason's solution can't work : jEditable adds form and input on event (click, dbleclick...) so when you executes the function on document ready, they don't exists !
You can modify jEditable adding this code before input.keydown :
input.keyup(function(e){if (e.keyCode === 32 || e.keyCode === 35) alert('Time to submit!');});
I have the following html code:
<input type="text" id="theInput" value=""/>
Click me
I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:
$('#theLink').live('click', function(){
alert('click');
});
$('#theInput').live('change', function(){
alert('change');
});
However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only "change" message is displayed.
I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.
The example is here.
I use jQuery 1.6.4.
As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).
To solve your problem, you could listen to click events on the document and compare the event's target with #theLink. Any click event will bubble up to the document (unless it is prevented).
Try this:
var lastValue = '';
$(document).click(function(event) {
var newValue = $('#theInput').val();
if ($(event.target).is('#theLink')) {
// The link was clicked
} else if (newValue !== lastValue) {
// Something else was clicked & input has changed
} else {
// Something else was clicked but input didn't change
}
lastValue = newValue;
});
JSFiddle: http://jsfiddle.net/PPvG/TTwEG/
Both events will fire but in your example the alert in the onchange event handler fired when the onmousedown event occurs will stop the onmouseup event required for the onclick event to fire. Using console.log will show both events firing.
http://jsfiddle.net/hTqNr/4/
Ok, now i got it, you could do
$('#theLink').live('click', function(e){
alert('click');
});
$('#theInput').live('change', function(e){
//Check if the change events is triggerede by the link
if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
//if this is the case trigger the click event of the link
$('#theLink').trigger("click");
}else{
//otherwise do what you would do in the change handler
alert('change');
}
});
Fiddle here http://jsfiddle.net/hTqNr/19/
why you dont pick the value of input box. you have to store initial value of input box on ready function
initialvalue= $('#theInput').val();
then compare the value
$('#theLink').live('click', function(){
var newvalue =$('#theInput').val();
if(newvalue!=initialvalue) {
//do something
}
});