Develop Reference

Select text in input field

I am going in circles here. Thought I could fix this issue asked a question earlier answered it only to get stuck again. Have a simple form with multiple panels containing text and numeric input field. When a user clicks in tabs in or whatever the content of that input field text should be selected. I've started looking at THIS article and also looking at the jquery focus and select. Nothing seems to be working. When clicking in the input field nothing seems to be highlighting the text already there.
Thanks
Here are a few things I've tried :
$("input[type=text]").focus(function() {
$(this).select();
});
$('#itemPanel :input[type="text"]').each(function() {
$(this).click(function() {
console.log("I was clicked in");
});
});

How about using on focus
$('input[type=text]').on('focus', function() {
$(this).select();
});
You can also use mouseup
$('input[type=text]').on('mouseup', function() {
$(this).select();
});
Fiddle

To autoselect the text in the input box I would recommend using clickevent instead of the focus event in your example.
This also seems to be written in the code example link you posted. http://www.electrictoolbox.com/jquery-select-function/ (Notice how it's using click instead of focus)
Try this:
$("input[type=text]").click(function() {
$(this).select();
});
--EDIT
Based on some feedback in the comments, there's a link to another similar question that suggests something like this:
$('input[type=text]').focus(function() {
$('input[type=text]').select().one('mouseup', function(e) {
e.preventDefault();
});
});

use Jquery to set focus to input with keydown

I am using a site that has a search box and I would like it so when you press the space bar but don't have the search text box selected, the search text box gets focus and has it's text cleared. I have it about done, but the check to see if the search box has focus isn't functioning properly. Any suggestions on my code? As is, if you press the space bar, it clears the search box, even if you're typing in the search box.
document.addEventListener('keydown', function (event) {
if (event.keyCode == 32) {
if ($('#searchTextBox').not(':focus')) {
$("#searchTextBox").focus().select();
}
}
});

While you delegate a keydown event on the document, you can also check if the source/target is the textbox itself by using event.target. If the event comes from the text field, just ignore it.
$(document).on('keydown', function (event) {
if (event.which == 32 && event.target.id != 'searchTextBox')
$("#searchTextBox").focus().select();
});
Working example : https://jsfiddle.net/DinoMyte/mdu5fxkq/3/

Maybe this will work
$(document).ready(function(){
$(document).on('keydown',function(event){
if(event.keyCode==32){
if(!$('#search').is(':focus')) {
$('#search').focus().select();
}
}
});
});
Grettings!

Even Simpler
Check for the keyCode as 32 is for spacebar and you can use any other by using its code
$(document).on('keydown', function (event) {
if (event.keyCode== 32) {
$("#searchTextBox").focus().select();
}
});

.select() not functioning correctly in Chrome

I'll keep it short and sweet. Trying to implement .select in jQuery and it doesn't seem to be cooperating in Chrome. Clicking in to the input selects the contents only briefly.
$(document).on('focus','.a-thing', function () {
this.select();
});
jsFiddle

this is not a jQuery object
$(document).on({
focus : function () {
$(this).select();
},
mouseup : function() {
return false;
}
}, '.a-thing');
FIDDLE
And you have to prevent the mouseup event to avoid loosing the selection as the mouseup event deselects the text, it's a know issue in Chrome.

Probably due to using the focus event. Try to fire the select event after the focus is complete:
$(document).on('focus','.a-thing', function () {
var self = this;
setTimeout(function() {
self.select();
},1);
});
Updated jsFiddle

User click event instead of foucs, because keyboard tab key will auto select field value without foucs event
$(document).on('click','.a-thing', function () {
this.select();
});
JSFIDDLE DEMO

You can active the select on the mouse up instead of the focus. Chrome seems to de-select on the mouse up event.
$(document).on('mouseup','.a-thing', function () {
$(this).select();
});
Or if you want to keep the focus event, you can prevent the action on mouse up
$(document).on('mouseup','.a-thing', function () {
e.preventDefault();
});

On mouseup event the selection is getting unselected, Please add the following to fix the issue
$(".a-thing").mouseup(function(e){
e.preventDefault();
});
DEMO

perform toUpperCase() each time the content of an input field is changed

I want to perform toUpperCase() each time the content of an input field is changed. I mean not when the field lost focus, but each time a character is typed.
I try this which doesn't work (I'm fairly new to JQ)!
$(".myClass").change(function () {
$(this).val().toUpperCase();
});
Besides the function is launched only on blur.
What's wrong?

$('.myClass').on('input', function() {
$(this).val($(this).val().toUpperCase());
});

Function will fire change event but You need to reset that value using .val() as just setting the text to toUpperCase() isn't enough.
$(".myClass").change(function () {
$(this).val($(this).val().toUpperCase());
});
Fiddle Demo

To limit the characters in the browser input to upper case, use css-
someinput{text-transform:uppercase}
Then use any change event or a validation before submitting to change the value you are sending to the server.

You should use another keyboard event:
https://api.jquery.com/keypress/
$( "#test" ).keypress(function(e) {
$(this).val($(this).val().toUpperCase());
});

Jquery : how to trigger an event when the user clear a textbox

i have a function that currently working on .keypress event when the user right something in the textbox it do some code, but i want the same event to be triggered also when the user clear the textbox .change doesn't help since it fires after the user change the focus to something else
Thanks

The keyup event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress event in IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}
});
jsFiddle
As Josh says, this gets fired for every character code that is pressed in the input. This is mostly just showing that you need to use the keyup event to trigger backspace, rather than the keypress event you are currently using.

The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:
$("#inputname").on('change keyup copy paste cut', function() {
//!this.value ...
});
see http://jsfiddle.net/gonfidentschal/XxLq2/
Unfortunately it's not possible to catch the cases where the field's value is set using javascript. If you set the value yourself it's not an issue because you know when you do it... but when you're using a library such as AngularJS that updates the view when the state changes then it can be a bit more work. Or you have to use a timer to check the value.
Also see the answer for Detecting input change in jQuery? which suggests the 'input' event understood by modern browsers. So just:
$("#inputname").on('input', function() {
//!this.value ...
});

Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields
/**
* Listens on textarea input.
* Considers: undo, cut, paste, backspc, keyboard input, etc
*/
$("#myContainer").on("input", "textarea", function() {
if (!this.value) {
}
});

You can check the value of the input field inside the on input' function() and combine it with an if/else statement and it will work very well as in the code below :
$( "#myinputid" ).on('input', function() {
if($(this).val() != "") {
//Do action here like in this example am hiding the previous table row
$(this).closest("tr").prev("tr").hide(); //hides previous row
}else{
$(this).closest("tr").prev("tr").show(); //shows previous row
}
});

Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:
$("#some-input").keyup(function(){
if($(this).val() == "") {
// input is cleared
}
});
<input type="text" id="some-input" />