detect on change of text box in jquery - javascript

I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated

Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation

You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/

If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/

Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions

Related

Detecting typing outside of an input in jQuery

Okay, so for our app we have a sidebar with a long list of all the different pages available to that current user. At the top of the sidebar is an input which, using Javascript, only shows options on the sidebar that contains the word(s) they searched for.
Is there any way of achieving this without actually having an input, or using a hidden input?
I want it so when the user types, as long as they aren't focused onto another input/textarea/whatever, it refines the sidebar. I'm not sure if you've seen the new MySpace but that's exactly what I'm going for.
Here is a quick example to point you in the right direction. Every time a key is pressed the event is checked to see if it was activated in an input. If not the character code is logged to the console.
$('body').on('keypress', function(e) {
if ($(e.target).is('input')) {
return;
}
console.log(e.which);
});
Listen to the keypress event on document. Then get the target from the event to determine if it's an input or similar.
$(document).keypress(function(event) {
if ($(event.target).is('input')) {
return;
}
event.preventDefault();
});
Take a look at the jQuery Hotkeys plugin.

Triggering jquery with a change in an input

Thanks for helping
I have a input that users put links or urls. What I do is when someone enters a url into the input jquery script connects to php script which gives some information about the url. Just like facebook share.
I use this code
$('.input-class').keyup(function(event){
$('.message').html('thanks for the url');
});
the problem with using keyup it work when you type something with the keyboard. Usually users copy and paste the url into the input. so, if they copy and past this is not working.
then I tried .change()
$('.input-class').change(function(event){
$('.message').html('thanks for the url');
});
but there is a problem with this as well. it works when the input loses the focus.
I need something should work what ever user type or paste into the input jquery should be triggered.
What should I do? Can I use change and keyup together?
change event is completely different, it gets triggered when the value changes which is evaluated when the element under question is out of focus.
Use input event as well which will get triggered when the text content of an element is changed through the user interface.
$('.input-class').on('keyup input', function(event){
$('.message').html('thanks for the url');
});
You can try on change Event, Make sure this will work in higher version of jQuery
jQuery('.input-class').on('change', function(e){
jQuery('.message').html('thanks for the url');
});
For Lower version of jQuery Use
jQuery('.input-class').live('change', function(e){
jQuery('.message').html('thanks for the url');
});
Trigger an input event:
$('.input-class').on('input', function(event){

Track/Observe TextBox value changed

Is there is any way to detect text box value changed , whether users changes it explicitly or some java script code modified the text box? I need to detect this change.
To track for user changes you can add a handler for key presses:
$(selector).keypress(function() {
// your code
});
Update: besides watching for key presses,
you can use the change function to watch from changes via JavaScript. It won't work immediatly for user changes (is only called after the input loses focus), but together with the keypress I believe you cover all cases:
$(selector).change(function() {
// the same code
});
setTimeout(function() { $(selector).val("changed"); }, 2000); // Will trigger the change
Edit: sorry, it seemed to work for JavaScript too, but I was mistaken... This question, however, will be able to solve your problem (tested with setTimeout, and it was able to detect the change).
I posted an example in jsFiddle. With this new watch plugin, you no longer need keypress or change: it will work for key typing, copy/pasting, JavaScript, etc.

How to figure out what event is being called in javascript

I'm using ASP.NET, but on a certain page I am using regular html text boxes as the request is done with AJAX, rather than the traditional full page post back. My issue is that when the user fills out the last text box and presses enter the text box loses focus and the page scrolls all the way to the bottom.
I tried using the onblur event but it's not working, so I'm wondering what event is actually being called when the enter key is pressed(or any key for that matter).
I tried this:
$("#loginPass").blur(function (e) {
if (e.keyCode == 13)
$("#DealerLogin").click();
});
I have firebug for Firefox but can't figure out how to look at what js related operations are firing.
In the Firebug scripts panel, you can click the pause button:
Try it right before you hit enter, then step through the code.
I wouldn't call myself a javascript expert, but this is what I would try.
When I get stuck, and don't know if or when my methods are being called , I fall back to using the trusty old "alert('in method 1');" technique to debug my code.
$(document).ready(function(){
alert("In document.ready()");
$("#loginPass").blur(function(e)
{
alert("In loginPass.blur() with keycode = " + e.keyCode);
});
$("#loginPass").keydown(function(e)
{
alert("In loginPass.keydown() with keycode = " + e.keyCode);
});
});
It certainly isn't an elegant technique, but is often revealing. If you find none of your methods are getting called, I guess make sure your text box id correctly matches "loginPass".
My issue is that when the user fills
out the last text box and presses
enter the text box loses focus and the
page scrolls all the way to the
bottom.
Hmm. This is definitely not a default behaviour for browsers. You need to know, what does this and just catch this event or part of code.

DOM problem with click initiating a focusout event on a different input

I have an <input type=text> with focusout event handler
I have a <button> with click event handler
Focusout checks whether format in input box is correct. It does so by testing input value against a regular expression. If it fails it displays a message (a div fades-in and -out after some time) and refocuses my input by calling
window.setTimout(function() { $(this).focus(); }, 10);
since I can't refocus in focusout event handler. focusout event can't be cancelled either. Just FYI.
Click collects data from input elements and sends it using Ajax.
The problem
When user TABs their way through the form everything is fine. When a certain input box failes formatting check it gets refocused immediately after user presses TAB.
But when user doesn't use TAB but instead clicks on each individual input field everything works fine until they click the button. focusout fires and sets time-out for refocusing. Since time-out is so short focusing happens afterwards and then click event fires and issues an Ajax request.
Question
I have implemented my formatting check as an independent jQuery plugin that I want to keep that way. It uses .live() to attach focusout on all input fields with a particular attribute where format regular expression is defined.
Data submission is also generic and I don't want to make it dependant on formatting plugin. They should both stay independent.
How can I prevent click event from executing without making these two plugins dependant?
Example code I'm fiddling with
After some searching I've seen that all major browser support document.activeElement but I can't make it work in Chrome. FF and IE both report this being the active element, but Chrome always says it's BODY that is active even though click fired on the button element.
Check this code http://jsfiddle.net/Anp4b/1/ and click on the button. Test with Chrome and some other browser and see the difference.
You could use a flag...
Live demo: http://jsfiddle.net/Anp4b/4/
So your question is:
How can I prevent click event from executing without making these two plugins dependent?
Well, you obviously cannot prevent the click event. If the user wants to click the button, he will, and the click event will trigger. There's nothing you can do about that.
So the answer to the above question is: You cannot.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if form submission should or should not occur.
JS Code:
$("#Name").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#Confirm").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('AJAX-TIME :)');
});
HTML Code:
<input type="text" id="Name">
<button id="Confirm">OK</button>
Is there are reason you use .focusout instead of .blur?
Using a flag is a good idea, but I would rather use a class on the element. By using classes to determine the state you can also style it accordingly. Here's my example based on your fiddle.
Another solution that hopefully gives the result you are looking for.
1) Create a named click handler:
var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);
2) Add the following to the focusout event when it's failing validation:
$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});
You can find an example of this here.

Categories