Focusing next text field on condition satisfaction - javascript

I am trying to learn jquery. I have two text fields. When the length of the first field becomes 3 i need the cursor to move to the next text box. How can i accomplish it? Please help me to find the answer
<input id="phone_field1" maxlength="3" name="phone_1" type="text">
<input id="phone_field2" maxlength="3" name="phone_1" type="text">
My code is given here. Please help me.


Do like below:
$('#phone_field1').on('input',function(){//or keyup,you can use input rather id
if($(this).val().length == $(this).prop('maxlength')){
$(this).next().focus();
}
});
Add missing bracket.

Related

How to use input mask plugin with alias

Hi I'm using the plugin RobinHerbots/Inputmask and I've followed the following guidance https://github.com/RobinHerbots/Inputmask/wiki/Howto:-Effectively-using-the-data-inputmask-attribute
So my javascript code looks like
$('[data-inputmask]').inputmask();
Inputmask.extendAliases({
'euro': {
mask: "999-999-999"
}
});
and this is my html
<input type="text" data-inputmask="'alias': 'euro'" />
The problem is when I move over the input field i get the word euro instead of the input mask, do you know why?

You can always do it the easy way and class mask as a parameter.
$('.inputmask').inputmask({"mask": "999-999-999"});
<input type="text" class="inputmask" />

Detect when input is start/end focused

I need to know if it's possible to detect when is input start focused and when is focus ended
HTML code:
<input type="text" value="" class="datas" >
<input type="text" value="" class="datas" >
<input type="text" value="" class="datas" >
JQuery code(only example how i need this):
$('.datas').on('focusStart', alert("focusStarted"));
$('.datas').on('focusEnd', alert("focusEnded"));
Anyone has any ideas?
Thanks for it.
Answer:
JQuery code:
$(".datas").focus(function(){
alert("This input field has starts focus.");
});
$(".datas").blur(function(){
alert("This input field has lost its focus.");
});

$('.datas').on('focus',function(){
alert('focusStarted');
}).on('blur',function(){
alert('focusEnded');
}

I guess "focus" and "blur" are what events you are looking for.
$('.datas').on('focus', alert("focusStarted"));
$('.datas').on('blur', alert("focusEnded"));
Hope that help.

Auto suggest when write a character in input field using JavaScript

I have an input field. When I click on this input field and write something then it will show all the suggested words that I want.
Like: If I write 'c' then it will show suggested words that i declared 'C#','Code','C++'
HTML:
<input type="text" class="input_field" />
How can I do it using JavaScript? Thank you.

Please refer for the auto complete http://jqueryui.com/autocomplete/

You may try following. It is my favourite at least.
Twitter Typeahead JS

html & js text field data (DD-MM-YYYY) validation

In my form I have a text field in which user type date. Good habit tells me to not let user to put anything other then dgit and '-' symbol in the field. However i have a bit problem with implementing such feature. So far I Have a field which accept only digits. If user try to put in field letter, this letter is being removed. But the point is to create (DD-MM-YYYY)format so field have to accept '-' symbol. Here is my code:
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>
i tried put |\- into regex but with no success. Can anyone point me where I am doing mistake?

use thie regex
/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/
you can also
**/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/.test(input.value)**

HTML5 has another approach for you:
<input type="date" name="test3">
The browser is responsible for the formatting of the date presentation, though.

You can try something like
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/[^\d-]/g.test(this.value)) this.value = this.value.replace(/[^\d-]/g,'')" onchange="validate(this)"/>
function validate(el){
var regex = /^(0?[1-9]|[12][0-9]|3[01])-(0?[1-9]|1[012])-\d{4}$/;
if(!regex.test(el.value)){
alert('invalid date');
el.value = '';
}
}
Demo: Fiddle

You can do this with HTML5
see my jsfidle: http://jsfiddle.net/H7tMZ/2/
<form>
<input type="text" name="date" pattern="\d{1,2}-\d{1,2}-\d{4}" placeholder="dd-mm-jjjj"/>
<button type="submit"/>
</form>

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page

$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle

UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.

Categories