Strange phenomenon detected with JQuery 1.4.4 for FireF, Chrome, Safari (IE untestested).
Aim: update a list while the user types a filter value into a simple, basic text-input-box.
Solution: bound keyup event, read out the value of the input-field, apply the filter... roughly:
$("#myinputfield").keyup(function(e) { myList.filter($(this).val()) });
it works perfectly for both typing and deleting EXCEPT for when deleting (del or backspace same effect) the last remaining (==first) char. in that case the event does not fire at all.
Anybody with an idea on what the problem is and/or how to solve it?
(p.s.: My solution would be to change from keyup event binding to a setTimeout periodical check as long as the input-field has focus, but that koxind of feels like a dirty escape...)
I cannot reproduce your problem. Perhaps it is just that your filter function does not handle $(this).val() == '' very well. Check out this quick test.
Related
I'm trying to catch the value of an input element every time its value changed. change requires blurring the element so it is not good for my case. I came across this Javascript change event on input element fires on only losing focus question and the accepted answer solved my problem, partly. According to the fiddle the event I should be watching is
$('#name').bind('DOMAttrModified textInput input change keypress paste focus', function () {
.....
})
However it doesn't work so well with characters that require an input method to input. For example, to input Chinese character "長", I'd press "c","h","a","n",“g” and then "space", all these keystrokes are recorded and will fire the events unwantedly - I only want to catch "長" as the input value, and the trigger should only fire when this character appears in the input textbox.
I've tried different combinations of the events, but none of them works. Is there any way to work this around?
I would like to change the first letter of a word to uppercase. So, I have written some code on keyup() function.
Whenever I type inside the text filed, Word's first letter is getting changed to uppercase.
I also use autocomplete() function. The problem is, Whenever I choose a word from autocomplete drop down it's first letter is not getting changed to uppercase and also the last text box is getting auto focused.
FYI: I am triggering the keyup() function after the autocomplete selection.
jsfiddle: http://jsfiddle.net/8ke04mgs/5/
You can use change event on your textbox
$(document).on('change', 'inputBox', function() {
// Does some stuff and logs the event to the console
});
This will solve the autocomplete problem
Your current way of doing things would work perfectly if the select method you provide to the autocomplete library was called after value of the box was updated.
But it is not, it's called before and so the value that it capitalises is the old value and is immediately replaced by autocomplete anyway.
As #Alok has pointed out, you can use the 'change' event to wait a little longer.
To avoid writing out your event handler out twice, remember .on() can take multiple events, so I'd just call it on keyup and change like so
$('#element').on('keyup change', function() {
...
});
But I think in modern browsers 'change' should be enough.
In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks
jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});
As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).
I am looking for a way to bind a function to a text box that executes when the text of the text box changed. I want to avoid the use of keyup or keypress, and other similar things. I don't want it to fire when I lose focus of it, just when the text changes. This needs to definitely work in IE browsers, and preferably work in other browsers.
Does anyone know which is the event to do this?
Thanks.
You might be able to try a setTimeout handler that just checks the value of that textbox every so often and will detect when it changes by comparing the current value to the last value.
I see that you've found a workaround but I just wanted to offer this anyways. Much more granular control.
$('#searchbox').on('keyup, keydown, change', function(e) {
if(e.keyCode!= 9 || e.keyCode!= 16 || e.keyCode!= 17 || e.keyCode!= 18){
//Find keys that you don't want triggering your event and add them in the IF statement above
//http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
//Put code here that calls AJAX
}
});
I have a DataTable in YUI. I'm trying to get the table to ignore all keyEvents. I've tried these methods:
YAHOO.util.Event.addListener(singleSelectDataTable, "keydown", function(oEvent) {
YAHOO.util.Event.stopPropagation(oEvent);
});
OR
YAHOO.util.Event.preventDefault(singleSelectDataTable.tableKeyEvent);
OR
singleSelectDataTable.subscribe('tableKeyEvent', function(oArgs) {
YAHOO.util.Event.preventDefault(oArgs.event);
});
I've looked at a couple of YUI examples to intercept click events, but they don't analogize to this specific scenario. I created a standalone HTML test file if that will help: http://pastebin.com/khfR4Stk. The foundational problem is that we don't want to support arrow key up or arrow key down in our tables; it's a scrolling table and in order for it to work properly we would have to adjust the scrolling thumb once the selection goes past the 'shown-window'.
The only other solution I could think of is to subscribe to the tableKeyEvent and then if the keypress is up-arrow, then unselect the newly selected row, selecting the previous row, doing the appropriate analogue for a down-arrow (basically undoing what the keypress just did). This didn't seem like the right solution…
The tableKeyEvent is raised after the up/down arrow key has been handled. So trying to stop that event will not help.
Looking at the _onTbodyKeydown function of the DataTable widget, I noticed that setting the selection mode to an invalid mode disables key arrow key navigation. Luckily it doesn't seem to break the other selection handling. At least not in your example.
So just change selectionMode:"single" to selectionMode:"" and you should be fine :-)
(Of course there is no guarantee that this will work in future versions)
Try creating the equiv of this onclick
function noenter(evt)
{
var k = evt.keyCode||evt.which;
return k != 13;
}
Get the syntax for getCharCode and tell the script that when it receives input, it needs to deny it.
can't you just add an eventhandler that returns false to the keydown event?