Jquery: force cursor into next input field gracefully? - javascript

I have 4 input fields next to eachother.
I'm trying to force the user to enter 1 character per input field and as soon as they entered 1 character, they need to enter the next character into the next field until the inputs finish.
However my current code is al over the place and I can't figure out what I need to do to achieve this.
This is my code:
https://jsfiddle.net/ej9tvosj/
$('.inps').keydown(function (event) {
// check for hyphen
var myLength = $(this).val().length;
if(myLength ==0){
$(this).next('.inps').focus();
}
});
if you enter something in the first one, it will jump into the next field but it will get messed up there after.
Could someone please advice on this issue?

You need to try on input listener to detect change in input instead of keyup since you need to ensure that a character is entered before changing focus.
$(document).on('input', '.inps', function (event) {
// check for hyphen
var myLength = $(this).val().trim().length;
if(myLength ==1){
$(this).next('.inps').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >

You can compare the myLength value with 1 like in the code snippet below:
$('.inps').keydown(function (event) {
// check for hyphen
var myLength = $(this).val().length;
if(myLength ==1){
$(this).next('.inps').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >

Related

Multiple input save one input value

I have Input section like i want to pass this 3 value in one input value with onchange
<script type="text/javascript">
function updateInput($i){
$('updateval').val($i);
}
</script>
<input type="text" onchange="updateInput(this.value)" >
<input type="text" onchange="updateInput(this.value)" >
<input type="text" onchange="updateInput(this.value)" >
<input type="text" id="updateval" >
i want to show here the all 3 value and with a seperation
like value1:value2:value3
in my last input section
Give the 3 input id not name, eg v1,v2,v3
onchange jquery those 3 input value. $('#updateval').val( [ $('#v1').val(),$('#v2').val(),$('#v3').val()].join(':'));
You're missing the position of source input on your function.
Input without name not passed in form submitted, except you send itvia coding.
<input type="text" class='val' >
<input type="text" class='val' >
<input type="text" class='val' >
<input type="text" id="updateval" >
<script>
$(document).ready(function(){
$('.val').on('keyup',function(){
let out=''
$(".val").each(function() {
out+= $(this).val()+":";
});
$('#updateval').val(out);
})
})
</script>
fiddle
<script type="text/javascript">
function updateInput(){
var val1 = $('#value1').val();
var val2 = $('#value2').val();
var val3 = $('#value3').val();
var output = val1 + ':' + val2 + ':' + val3
$('#updateval').val(output);
}
</script>
<input id="value1" type="text" Onkeyup="updateInput(this.value)" >
<input id="value2" type="text" Onkeyup="updateInput(this.value)" >
<input id="value3" type="text" Onkeyup="updateInput(this.value)" >
<input type="text" id="updateval" value="">
Fiddle
Details commented in demo.
// Reference the first form on page
const form = document.forms[0];
/*
Register form to the input event (or change event with .onchange)
The input event will fire immediately after the user has entered any data
The change event will fire when the user has entered data then triggers a blur event by
focusing elsewhere.
*/
form.oninput = display;
/*
//A Pass Event Object
/*
B1 event.currentTarget is the tag registered to event (form)
B2 .elements.text is a collection of all the form controls [name=text] (inputs)
B3 brackets and spread operator convert collection into an array [...all input]
B4 .map() returns each input value into an array
*/
/*
//C Get output.all and assign its value to the new array then convert it into a string
delimited by colons
//D End function
*/
function display(event) {//A
let texts = [...event.currentTarget.elements.text].map(txt => txt.value);//B1-4
event.currentTarget.elements.all.value = texts.join(':');//C
return false;//D
}
:root {
font: 400 5vw/1.2 Consolas
}
input,
output {
display: block;
font: inherit
}
<form>
<input name='text'>
<input name='text'>
<input name='text'>
<output name='all'></output>
</form>

I have a problem with a function in javascript

I have a problem with my function in javascript, I try to replace automatically the first character when a user types any character, for example.
If the user types the letter a, in the input (with my function) replace that letter with the plus sign (+).
I want to add in my function a condition that allows to add automatically the plus sign at the beginning of the input and if is possible besides mustn't allow to delete the first character from the input.
Now my function allows to write only numbers.
<div>
<label>Write a phone number:</label>
<input type="text" maxlength="12" onkeypress="return number(event)"/>
</div>
<script type="text/javascript">
function number(e){
var tecla = e.keyCode;
if (tecla==8 || tecla==9 || tecla==13){
return true;
}
var patron =/[0-9+]/;
var tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
}
</script>
Updated, if you want past +44
Try to this one, and change if you need it
function phoneMask() {
num = $(this).val().replace(/\+4{1,2}|\D/g,'');
$(this).val("+44" + num);
}
$("#test").keyup(phoneMask);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>Write a phone number:</label>
<input type="text" maxlength="12" id="test"/>
</div>

Hide input text using jQuery

How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.
Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.
You should use a password field, set autocomplete="false" and toggle between text/password for the field
document.getElementById("fooVisible").addEventListener("change", function() {
if (this.checked) {
return document.getElementById("foo").setAttribute("type", "text");
}
document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />
You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.
$(document).ready(function(){
var textValue = "";
$('.asteriskInput').keypress(function(e){
var textLength = $(this).length;
textValue += e.key;
$(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
});
$('#changeInputView').on('click',function(){
$('.asteriskInput').val(textValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>

How to show button after typing text

i want to show button on the form after typing something inside input element in Jsp.
<input type="text" id="phoneNumber" name="Number" maxlength="10" size="15" onfocus="this.value=''" value="Enter your number" autocomplete="off">
<br/><br/>
<span style="color:red" class="title1" id="checkPhone"></span><br/>
<input type="submit" class="sendBtn" id="btSend" name="btSend" value="NextStep" style="display: none">
can you help me?
You can use keyup event of textbox to detect if something is typed in, also check if the textbox has some text to hide button if it is empty
Live Demo
$('input').keyup(function(){
if($.trim(this.value).length > 0)
$('#btSend').show()
else
$('#btSend').hide()
});
You might need to be specific about the inputs instead of doing it with all input elements e.g you can do it with inputs have some class
Does this do what you need?
$('#phoneNumber').change(function() {
$('#btSend').show();
});
var inp = $("#txt").val();
if(jQuery.trim(inp).length > 0)
{
$("#button").show();
}
Hope this works for you
$('#phoneNumber').focusout(function () {
if ($(this).val().length > 0) {
$('#btSend').show();
} else {
$('#btSend').hide();
}
});

How to check how many empty input fields there are?

I've about 5 input fields and before checking them I want to be able to alert using javascript to let the user know that there are empty fields which must be filled in before checking.
So I want to be able to alert using js if 2 of the 5 input fields are empty!
Can anybody please help me with this! I've research a lot and read some blogs that saying to use the "length" but couldn't figure it out!
So as soon as the user clicks on the submit button with the id of "submit", an alert would prompt saying must fill in at least 2 out of the 5 input boxes...
Here is my code:
<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="submit" id="submit" value="Check Form" />
Thanks
document.getElementById('submit').onclick = function() {
var inputs = document.getElementsByTagName('input'),
empty = 0;
for (var i = 0, len = inputs.length - 1; i < len; i++) {
empty += !inputs[i].value;
}
if (empty > 3) {
alert('You must fill in at least 2 fields');
}
};
Example: http://jsfiddle.net/Fn8cw/
With jquery you can loop through all of your input fields and increment a variable if the input field is empty:
$("#your_form_div").change(function(){
$(this).parents('form')
.find(':input').each(function(i) {
if( $(this).val() )
//here your incremented variable
}); });
this will tell you how many are empty
var empty = $('input:text').filter(function() { return $(this).val() == ""; });
if (empty.length > 3){
alert("you must fill in at least two inputs");
}
here is a working demo
of course I'm assumming you can use jQuery

Categories

Resources