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();
});
});

How can I tell when a character has been typed in an input field?

Let's say I have an input field with an id of code ( #code ).
How can I tell when a new character has been typed in it with javascript or jQuery ?
This is when the text is manually being entered or is done by javascript / jQuery.

Use Change function to track any changes in the textbox input. Change event will be triggered only if you focus out of the text box
$('#idoftextbox').change(function(){
//do something
});
If you want to detect as the user enters something then you need to use KeyPress
$('#idoftextbox').keypress(function(event) {
if ( event.which == 13 ) { //This will give you the key code
event.preventDefault();
}
});

Edit
In modern browsers only, you can use the "input" event. The change event will probably help you in most cases for all browsers and jQuery and JS examples are defined below.
As mentioned the change event will only fire on an input losing focus so you'd have to use a combination of techniques to cover all bases, including checking the field value at given intervals. A thorough explanation that covers all scenarios can be found on SO here:
Detecting input change in jQuery?
jQuery:
$('#code').on('change', function(e){
//do something
});
Javascript
document.getElementById('code').addEventListener('change', function(e){
//do something
});

This will trigger on every keypress.
Using Javascript:
document.getElementById('id').addEventListener('input',function(e){
console.log("Print Hello World");
//do something else
});

jquery - field selects all text then unselects it on focus

trying to figure out why this is happening - I have an input text field and I want all the text to be highlighted when the field receives focus. This happens, very quickly, and then all of the text is unselected. Any idea why this would occur? Here's the code I'm using:
$("#permalink").focus(function(){
this.select();
});

You need to override the mouseup event on the input element (as mentioned in this post - thanks MrSlayer!)
See here for example: http://jsfiddle.net/f8TdX/

This is an issue in WebKit. The best option is to use a combination of the focus and mouseup events. The following comes from another answer to a similar question.
$("#permalink").focus(function() {
var $this = $(this);
$this.select();
window.setTimeout(function() {
$this.select();
}, 1);
// Work around WebKit's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});

Give this a shot
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
Select all contents of textbox when it receives focus (JavaScript or jQuery)

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" />

how to remove the default focus on submit button in HTML form?

I have a HTML form on my page. When i am putting some value in one of the text fields in form and press 'Enter key' the form gets submitted instantly. I think this is happening due to default focus is on submit button. But i try to remove that focus using blur() function, it is not working. I am using Chrome.
Is there any way to avoid this scenario?
All suggestions are welcome. thanks in advance.

The Submit button is not actually focused; Enter in a text field is supposed to submit the form.
You could register a handler for the submit event, and then only allow it if the Submit button was actually focused at the time submit was requested.
However, you'll be deliberately breaking the way that HTML forms work. Not everyone wants to submit the form using the One True Way of actually clicking the Submit button (also, you'll be breaking accessibility and may introduce browser-specific bugs).

No. The focus is still on the text field. Pressing enter there is supposed to submit the form (and bypasses the submit button entirely).
You can suppress the behavior using JavaScript, but since it is normal behavior for the browser, I wouldn't recommend doing so.

try this solution: replace the 'input' with 'button' and add attribute
type equals 'button' and handle the onclick event with submit javascript function
<form name='testForm'>
<input type='text' value="myName" />
<button type='button' onclick='testForm.submit()'/>
</form>
i think it works also with tag input adding the same attribute
Enjoy
Mirco

blur() is the way to go. It works like this:
<button onclick="this.blur();">some button</button>
Note that you should not use JavaScript and DOM-events using Attributes. This is just for demonstration purposes. Try to be unobstrusive.

Maybe it will help you out, the form is "supposed" to be sent with enter in the text box (HTML by design), it is no a matter of focus.
If you want to avoid it, check this out.
This is the proposed script:
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
Good luck, tell me if you need any clarification!
EDIT: I do agree with Piskvor answer, it may bring some bugs

this has nothing to do with the focus, its just the default behavior of you browser. to avoid this, you could try to cath the enter-keypress like this (Source - but there are a lot of other solutions (most working the same way, just using other events like the firms onsubmit instead of the documents onkeypress)):
function catchEnter(e){
// Catch IE’s window.event if the
// ‘e’ variable is null.
// FireFox and others populate the
// e variable automagically.
if (!e) e = window.event;
// Catch the keyCode into a variable.
// IE = keyCode, DOM = which.
var code = (e.keyCode) ? e.keyCode : e.which;
// If code = 13 (enter) or 3 (return),
// cancel it out; else keep going and
// process the key.
if (code == 13 || code == 3)
return false;
else
return true;
}
// Anonymous method to push the onkeypress
// onto the document.
// You could finegrain this by
// document.formName.onkeypress or even on a control.
window.onload = function() { document.onkeypress = catchEnter; };

Change:
<input type="text" ... >
To:
<textarea ... ></textarea>
You may need to mess around with the attributes a bit, I've left them signified as ....

try to add on the keypress event of your button this javascript function :
function ButtonKeyPress()
{
var code = (window.event.which) ? window.event.which : window.event.keyCode;
if ( code == 13 )
{
event.returnValue = false;
return false;
}
return true;
}

So, you have a form. In this form, you have a text input, and a submit button.
You get in the text input, you type some text, than you press "Enter". This submits the form.
You would like to break this normal behavior.
I think this is not a good idea : The convention says that when your in a text input and press "Enter", it submits the form. If you change this behavior, users could be (I don't find the right word, let's say ~) surprised.
Anyway, if you still want to do this, you should listen for the keypress event on the text input, and than prevent default behaviour shoud do the work.
let's say you use jQuery :
$(input[type=text]).bind('keypress', function(evt) {
if(evt.keyCode == 13) {
evt.preventDefault();
}
});
This should do it. I didn't test it, maybe I made mistakes, but you got the idea, no ?
And maybe keyup is better than keypress... I don't know very well this, not enough practice on key bindings

The easiest way is to set css style like this:
&:focus {
outline: 0 none;
}