We Keep Coding

detect on change of text box in jquery

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

Keeping a text field in focus

I thought this would be easy enough to do without seeking help, but I guess not. Adding the autofocus="true" tag works when the page initially loads but the text field loses focus if anyone clicks anywhere or opens a link. How do I force the field to keep focus?

Someone ask why you want to do that .
the answer of-course is as a developers we need to deal we crazy demands by our clients :)
To the answer:
$(document).ready(function(){
$(document).click(function() { $("<THE-ELEMENT>").focus() });
});
In this case we add listener to all elements in the document :)

Attach a click event listener on the document that focus's on the input box on click.
$(document).on("click", function()
{
$("yourInputIdHERE").focus();
}

$("#textbox").focus().on('blur', function() {
$(this).focus();
});

Handling all cases incase where some of the events are prevented from propagating till the document. Also handle the case where user switches tab and comes back.
$("#element").blur(function ()
{
$("#element").focus();
});
$(document).bind('keydown mousedown mouseup click',function ()
{
$("#element").focus();
});

What you might want to try do, is attach an event handler to the blur event. Once you capture it, you can simply trigger a focus event on the same element that lost focus in the first place.
$("input").on('blur',function(){
$(this).focus();
});
You might want to incorporate this with some form of validation so that once the user has entered the desired value, they will be able to leave the text field.
$("input").on('blur',function(){
var $this = $(this);
if ($this.val() == ''){
$this.focus();
showErrorMessage("Please enter a value");
}
});
If you don't implement some form of flag to enable/disable this behavior, you'll be locking the user into one field forever. There will be no (easy) way for them to move to a different area of the page.
Here is a small demo,
you'll notice that once the text field has focus, it will keep it until a value has been entered.

javascript trigger event on android select text

I need to trigger event when user selects text in android touch device.In web browsers am able to trigger event by checking on each mouse up event whether window.getselection is null.
Touch select text event not triggering.
document.addEventListener('touchend', function(event)
{
if( window.getSelection){
t = window.getSelection().toString();
alert(t);
}
});
I tried in touchend event.But when user selects text event not triggering.

Why not try a jQuery solution using the .change() function? First you add the jQuery library immediately above your included JavaScript file declaration, then you've got jQuery capability in the document. Next read up on .change() and try something like:
$('#touchend').change(function(){
if(your condition){var $t = window.getSelection().toString();}
});
or whatever JavaScript code you want in the function. jQuery is simply a JavaScript library, so you can use it freely with your JavaScript. It's a gamechanger!

You actually want to listen to the event selectionchange.
Note that it will fire for both creating a selection and clearing the selection so when you get that event, you want to query the selection with window.getSelection() and check the status of isCollapsed.

jQuery on change doesnt fire when the same input is re-entered

I have this form where you enter something in the input field and i have added an onchange event listener to throw an alert when the value is changed. Apparently the code works in Chrome but in Firefox it doesnt work if we re-enter the same text.
Example:
1st try --> Enters the text -> Hello. (Alerts as Text changed).
2nd try --> Enters the text -> Hello. (again) (on Change event isnt called).
Can anyone tell me why this is happening ? Thank you for your time in advance :).
Here is a jsfiddle.
http://jsfiddle.net/neoragex/6yMsf/1/

You may handle blur event. It would be fired even if value is the same.

Because the event only fires when the value of the input field changes - You're setting the same value again, so no change happens as far as the browser is concerned.

$(function() {
$('input[type=text]').on('blur',function() {
alert($(this).val());
});
});​

Try with keyup event. This event fire when a key press.

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.