We Keep Coding

Change function on Javascript/jQuery

I have a textfield, and I want the field to be disabled or read only if I change text on the field. But, before that, I can't make change function. I don't know why.
I have tried this code :
$("#submitOrder_cust_id_name").click(function () {
alert("Test");
});
and when I click the field it is working.
But, when I use this code
$("#submitOrder_cust_id_name").change(function () {alert("Test");});
or this code
$("#submitOrder_cust_id_name").on('change', function () {
alert("Test");
})
it doesn't work at all.
Please help. Thanks.

jquery change event trigger only when hit enter on the text box. If you want to trigger a event when you enter any character use "keypress" instead of "change"
Refer this :
https://www.w3schools.com/jquery/event_keypress.asp

use on 'change':
$('#submitOrder_cust_id_name').on('change', function () {
alert('test');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

Try using .blur(). This will be called when the input field loses focus:
$('#submitOrder_cust_id_name').on('blur', function () {
alert('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

How can I make focus event happened on the dynamically inserted input?

$("input").focus(function(){
console.log('input focused');
});
Above is my code to test if focus event happened.And I made a button to insert another input dynamically.But while I focus the inserted inputs,no console logged at all.
Can anybody help?
Thanks

You need to use event delegation with the focusin event as focus does not support bubbling(event delegation requires bubbling support to work).
$("input").focus(function() {
snippet.log('input focus: ' + $('input').index(this));
});
$('#dynamicarea').on('focusin', 'input', function() {
snippet.log('input focusin: ' + $('input').index(this));
});
$('button').click(function() {
$('div').append('<input />');
})
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />
<input />
<br />
<button>Add</button>
<div id="dynamicarea"></div>

function focused(evt){
var target = evt.target;
var target_name = evt.target.nodeName;
$(target).keydown(function(e){
if(e.which==9 && $(e.target).parent().parent().is(":last-of-type")){
e.preventDefault();
}else{
$(this).unbind("keydown");
}
});
}
<sectionA>
<input>
/*insert input here*/
</sectionA>
<sectionB>
<input>
<input>
</sectionB>
Originally I was trying to stop focusing to the next input in the sectionB which is not in the viewport when pressing the tab. So I write a function above to bind in the inserted input to tell. But Arun's answer also work. Thanks a lot.

Select Text in Input On Focus Bootstrap 3

I have 4 fields for API keys (test and live, secret and public) all with the class of .key
I'm trying to get a select of the input value on focus of the input.
The input looks like so:
<input
type="text"
name="live_public_key"
class="form-control text-center key"
value="API key here"
readonly>
I've searched all over and the common answer to this seems to be something similar to this:
<script>
$(document).on('focus', '.key', function() {
this.select();
});
</script>
But this doesn't work.
It selects the text for a milli-second the deselects it and seems to move the focus back to the input itself.
I don't know if this is a bootstrap thing or if I've coded something wrong.

The field is geting unselected on mouseup. Try this:
$(document).on('focus', '.key', function() {
this.select();
}).on('mouseup', '.key', function(e) {
e.preventDefault();
});
JSFiddle

Use a workaround:
<script>
$(document).on('focus', '.key', function() {
var that = this;
window.setTimeout (function(){
that.select();
}, 100);
});
</script>

Maintain focus on an input tag

I'm trying to keep focus on an input element with this code:
<input onblur="this.focus()" />
But it doesn't seem to work.

If we just call .focus() right on blur event, it will restore focus, but actually there will be no text cursor. To handle this we have to let element to lose focus and then return it in few milliseconds. We can use setTimeout() for this.
$('#inp').on('blur',function () {
var blurEl = $(this);
setTimeout(function() {
blurEl.focus()
}, 10);
});
Here's working example. Be careful - you can't leave text field after you enter it =)
EDIT I used jQuery, but it can be easily done without it.
EDIT2 Here's pure JS version fiddle
<input type="text" id="elemID" />
<script type="text/javascript">
document.getElementById('elemID').onblur = function (event) {
var blurEl = this;
setTimeout(function() {
blurEl.focus()
}, 10);
};
</script>

JQuery advice or suggestion for new alternative solution

Is there a better way of doing this
$("#<%=Text_Name.ClientID%>").mouseleave(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
What this code does is when you scroll out of the textbox it leaves the it returns to you "Name".
A con about using this technique is when user move mouse out the textbox it fills something in when user types.

It's really simple with jQuery, check this:
html
<input type="text" id="myInput" value="Name" />
jQuery
$(function() {
$('#myInput').focusin(function() {
$(this).val('');
});
$('#myInput').focusout(function() {
$(this).val('Name');
$(this).css('background-color', '#ccc');
});
});
Here goes jsFiddle.
No need for plugins or much code for this.

<input name="search" placeholder="<%=Text_Name.ClientID%>"/>
no javascript needed.

$("#<%=Text_Name.ClientID%>").blur(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
This event happens when you focus on something else, which is what the textbox at the top right of stack overflow probably uses.

You could look into the watermark plugin I was posting about here:
Custom jQuery plugin return val()
Just edit it to be mouseover / mouseout instead of on focus/blur.
jsFiddle edited to show mouseover/mouseout