Jquery select behavior differ on IE - javascript

I have simple code:
<input id="thisInput" class="MyInput"
maxlength="3"
value=" 0"
type="text" />
and JS code:
$("#thisInput").on( "click", function() {
$(this).select();
});
In Chrome this code. In first click selects all values in input. The other click end with no selection
In IE11 each click end with selection of all text in input.
my code is somewhat wrong? Or Chrome or IE is bugged?
JSFIDDLe

Like #Jai commented, this is the Chrome behavior. Personally I don't consider this a Chrome bug nor a IE one.
Selecting the text always
If you want to always select the text from input, you can trick it with an async call:
$("#thisInput").on("click", function() {
setTimeout(function() {
$(this).select();
}.bind(this), 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />
Toggle selection
Well, the best working solution I see is using a flag and toggling it:
var select = false;
$("#thisInput").on("click", function() {
if (select = !select) {
$(this).select();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />

It may happened that click event is not triggering properly in IE, so try adding focus event also
$("#thisInput").on( "click focus", function() {
$(this).select();
});
JSFiddle Demo

Related

onBlur and onFocus event

I have a textbox that is using a masking plugin for Phone and onblur I am removing a particular class. However on tab key from another field it again turns to red. The code is as follows:
<input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">
$("#AltPhone").blur(function () {
$(this).removeClass('input-validation-error');
$("label[for='AltPhone']").removeClass('input-validation-error');
});
$("#AltPhone").focus(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
});
The blur function is working as expected, but focus is not.
Please check this code will work for you and let me know.
$("#AltPhone").focusout(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
});
As you can see in console its working fine .Don't know but it may be because of your plugin.If possible please post some code.
$("#AltPhone").blur(function () {
$(this).removeClass('input-validation-error');
$("label[for='AltPhone']").removeClass('input-validation-error');
console.log("blur");
});
$("#AltPhone").focus(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
console.log("focus");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">

remove disable from input type range jquery mobile

I have 3 radio buttons and a range input type which is disabled, what I want to remove this disable from range type after users clicks a specific radio button from the 3 radio button I tried using removeAttr It doesn't work this is my code for removing the disable attribute
This is code for radio button
<input type="radio" name="restriction" id="rdSelect" class="cardi" value="cardinality" />
<label for="rdSelect">Caridi</label>
And this is code for the input type range
<input type="range" name="cardinality" id="cardinality" value="1" min="1" max="100" disabled/>
And this is my code for removing disable attribute, but it is not working
$(document).ready(function () {$("#rdSelect").click(function ()
{
$("#rag").removeAttr("disabled");
});
});
Can anyone help me to solve this I really need it, this is two days I couldn't be able to solve it. thanks.
You first need to listen to radio button's change event. Accordingly, disbale or enable the slider using slider widget functions. E.g. .slider("enable") or .slider("disable").
Use page events not .ready() to add listeners.
$(document).on("pagecreate", "#pageID", function () {
$("#rdSelect").on("change", function () {
if ($(this).is(":checked")) {
$("#cardinality").slider("enable");
}
});
});
Demo
try this:
$(document).ready(function(){
$("#rdSelect").click(function(){
$("#rag").prop("disabled",false);
});
});
Your range element has an id cardinality, why are you saying #rag
Use this to make it enable.
$("#cardinality").attr("disabled",false);
instead of
$("#rag").removeAttr("disabled");
you may use
<script>
$(document).ready(function () {$("#rdSelect").click(function () {
$('#cardinality').prop("disabled", false);
});
});
</script>
<input type="radio" name="restriction" id="rdSelect" class="cardi" value="cardinality" />
<label for="rdSelect">Caridi</label> <br/>
<input type="range" name="cardinality" id="cardinality" value="1" min="1" max="100" disabled=""/>

Auto tab to next input field when fill 4 characters

What I am trying to do is, point to next tab when filling four characters. Each field should have 4 characters and once it is completed it should move to next input box.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
Fiddle.
Your code works fine, however your input elements are set as type="number". Non-numeric content is ignored, so if you enter "abcd", for example, the input's value is empty (meaning a length of 0). If you enter "1234" on the other hand, the input's value is 1234.
If you want your code to fire when non-numeric content is entered, simply change each input's type to text.
<input class="inputs" type="text" maxlength="4" />
JSFiddle demo.
Note that I've also removed the duplicate class attribute from each of your elements in that example, too.
As krish has mentioned in the comments on your question, there is an issue with your code in that the last input element will continue to accept more than 4 characters. To fix this, put a check in place to ensure that there is a next('.inputs') element:
if (this.value.length == this.maxLength) {
var $next = $(this).next('.inputs');
if ($next.length)
$(this).next('.inputs').focus();
else
$(this).blur();
}
JSFiddle demo.
Perhaps you neglected to enclose your code in DOM ready. Jsfiddle encloses your code in $(window).load(function() { .....}) and that's why it's working. So on your own page use:
$(function() {
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
});
In the jsfiddle you can confirm that by selecting No wrap - in <head> and then click run. The code will not work. But if you use the above which is enclosed in DOM ready, it works.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<Script>
$(document).ready(function(){
$(".inputs").keyup(function () {
$this=$(this);
if ($this.val().length >=$this.data("maxlength")) {
if($this.val().length>$this.data("maxlength")){
$this.val($this.val().substring(0,4));
}
$this.next(".inputs").focus();
}
});
});
</Script>
</head>
<body>
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
</body>
Here is a improved Version for all who need this for some kind of splitted Informations like a serial key or something like that:
$(document).ready(function(){
$(".amazonInput").keydown(function (e) {
var code = e.which;
$this=$(this);
if ($this.val().length >=$this.data("maxlength") && code != 8) {
if($this.val().length>$this.data("maxlength")){
$this.val($this.val().substring(0,4));
}
$this.next(".amazonInput").focus();
}
if($this.val().length == 0 && code == 8) {
$this.prev(".amazonInput").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My first issue with this has been that if tabbing through fields that are already filled, you have to select each field manually. I suggest this:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').select();
}
});
The second issue's solution escapes me. Basically, in the same situation of having fields previously filled, if you type too quickly the events will fire as such: KeyDown KeyDown KeyUp KeyUp
What this causes, is to skip the next input.
For those Who Have tried the Accepted Answer, but Couldn't find solution like me
In your Layout Page or page header, just input ajax library link (Shown in below)
It worked on me, Hope It will help you as well.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
var $next = $(this).next('.inputs');
if ($next.length)
$(this).next('.inputs').focus();
else
$(this).blur();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
</body>

jQuery click event on radio button doesn't get fired

I've got the following code to trigger a click event on some radio buttons! but it doesn't get fired! can any one help me with this!
CODE :
$("#inline_content input[name='type']").click(function(){
if($('input:radio[name=type]:checked').val() == "walk_in"){
$('#select-table > .roomNumber').attr('enabled',false);
}
});
RADIO BUTTONS
<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.
Update
Tried onChange() too but not working.
It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/
$("#inline_content input[name='type']").click(function(){
alert('You clicked radio!');
if($('input:radio[name=type]:checked').val() == "walk_in"){
alert($('input:radio[name=type]:checked').val());
//$('#select-table > .roomNumber').attr('enabled',false);
}
});
There are a couple of things wrong in this code:
You're using <input> the wrong way. You should use a <label> if you want to make the text behind it clickable.
It's setting the enabled attribute, which does not exist. Use disabled instead.
If it would be an attribute, it's value should not be false, use disabled="disabled" or simply disabled without a value.
If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use .change() instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/
Personally, for me, the best solution for a similar issue was:
HTML
<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />
JQuery
var $selectAll = $( "input:radio[name=selectAll]" );
$selectAll.on( "change", function() {
console.log( "selectAll: " + $(this).val() );
// or
alert( "selectAll: " + $(this).val() );
});
*The event "click" can work in place of "change" as well.
Hope this helps!
A different way
$("#inline_content input[name='type']").change(function () {
if ($(this).val() == "walk_in" && $(this).is(":checked")) {
$('#select-table > .roomNumber').attr('enabled', false);
}
});
Demo - http://jsfiddle.net/cB6xV/
Seems like you're #inline_content isn't there! Remove the jQuery-Selector or check the parent elements, maybe you have a typo or forgot to add the id.
(made you a jsfiddle, works after adding a parent <div id="inline_content">: http://jsfiddle.net/J5HdN/)
put ur js code under the form html or use $(document).ready(function(){}) and try this.
$('#inline_content input[type="radio"]').click(function(){
if($(this).val() == "walk_in"){
alert('ok');
}
});

How do I move focus to next input with jQuery?

I am using the autocomplete plugin with jQuery and it is working fine. However, in IE, when the user selects an item in the autocomplete, the focus does not then move to the next input field. Naturally it works in Firefox. The plugin doesn't have a built-in solution but does provide for "options". Is there a way I can force it to move to the next input field?
You can do something like this:
$("input").change(function() {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
});
The other answers posted here may not work for you since they depend on the next input being the very next sibling element, which often isn't the case. This approach goes up to the form and searches for the next input type element.
JQuery UI already has this, in my example below I included a maxchar attribute to focus on the next focus-able element (input, select, textarea, button and object) if i typed in the max number of characters
HTML:
text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
<option value="1">1</option>
<option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
<option value="1">1</option>
<option value="1">2</option>
</select>
Javascript:
$(function() {
var focusables = $(":focusable");
focusables.keyup(function(e) {
var maxchar = false;
if ($(this).attr("maxchar")) {
if ($(this).val().length >= $(this).attr("maxchar"))
maxchar = true;
}
if (e.keyCode == 13 || maxchar) {
var current = focusables.index(this),
next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
next.focus();
}
});
});
What Sam meant was :
$('#myInput').focus(function(){
$(this).next('input').focus();
})
Try using something like:
var inputs = $(this).closest('form').find(':focusable');
inputs.eq(inputs.index(this) + 1).focus();
why not simply just give the input field where you want to jump to a id and do a simple focus
$("#newListField").focus();
Use eq to get to specific element.
Documentation about index
$("input").keyup(function () {
var index = $(this).index("input");
$("input").eq(index + 1).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
you can use
$(document).on("keypress","input,select",function (e) {
e.preventDefault();
if (e.keyCode==13) {
$(':input).eq($(':input').index(this) + 1)').focus();
}
});
Could you post some of your HTML as an example?
In the mean-time, try this:
$('#myInput').result(function(){
$(this).next('input').focus();
})
That's untested, so it'll probably need some tweaking.
I just wrote a jQuery plugin that does what you are looking for (annoyed that that I couldn't find andy solution myself (tabStop -> http://plugins.jquery.com/tabstop/)
function nextFormInput() {
var focused = $(':focus');
var inputs = $(focused).closest('form').find(':input');
inputs.eq(inputs.index(focused) + 1).focus();
}
if you are using event.preventDefault() in your script then comment it out because IE doesn't likes it.
The easiest way is to remove it from the tab index all together:
$('#control').find('input[readonly]').each(function () {
$(this).attr('tabindex', '-1');
});
I already use this on a couple of forms.
Here is what worked in my case. Might be less performance intensive.
$('#myelement').siblings('input').first().focus();
var inputs = $('input, select, textarea').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var nextInput = inputs.get(inputs.index(this) + 1);
if (nextInput) {
nextInput.focus();
}
}
});
onchange="$('select')[$('select').index(this)+1].focus()"
This may work if your next field is another select.

Categories