How to make my input maximum 10 digits length.How to make possible to enter only 10 numbers.
<input type="text" maxlength="10" onkeyup="return isAllowedSymbol(this); checkNumbers(this);" "placeholder="Enter data" name="answer" ><br>
function checkNumbers(input)
{
if (input.value.length > 10)
{
input.value = input.value.replace(input.value, '');
}
}
This works already, but you have a syntax error - I removed the extra quotation mark.
<input type="text" maxlength="10" onkeyup="return isAllowedSymbol(this); checkNumbers(this);" placeholder="Enter data" name="answer" >
You are already doing it with maxlength="10", you have quotes messed up though. JS is redundant.
<input type="text" maxlength="10" placeholder="Enter data" name="answer" ><br>
Related
I have a page with multiple text boxes, all of which are not required fields (i.e. the user can fill out as many as they wish to). However, I am not able to get autofocus to work from the second text box onwards and the form submits instead when I press enter to move into the next text box (probably because the inputs are not required). Is there a way such that I will be able to autofocus into the next text box after keying in the response for the previous textbox even if the field is not required/stop the form from submitting? Thanks for any help!
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus ></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" ></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" ></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" > </br>
<button type="submit">Submit</button>
</form>
</main>
</html>
try doing this, its supposed to make the enter to submit only on the last input, and the other times it just moves to the next input.
Dont forget to add the onkeydown to all the inputs except the last one.
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus onkeydown="next(this, event)"></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response4" name="response4" autocomplete="off"> </br>
<button type="submit">Submit</button>
</form>
<script>
function next(currElement, e) {
if (e.keyCode === 13) {
e.preventDefault();
let nextNum = parseInt(currElement.id.substr(8)) + 1;
document.getElementById('response' + nextNum).focus();
return false;
}
}
</script>
I have this current if statement - which is inside a for loop:
// Validate Temperatures
if(inputs[i].name.startsWith("actual-temp") || inputs[i].name.startsWith("min-temp") || inputs[i].name.startsWith("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
What it does
Checks all inputs that has name starting with actual-temp, min-temp and max-temp and passes them into a function called validate
My HTML file
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
Question
Within my if statement - how can I grab all elements that startsWith() (as it is in the if statement currently) and ends with either -1 or -2? Or alternatively exclude inputs names that end with -3.
You can use regular expressions for your test
if (inputs[i].name.match(/^(actual|min|max)-temp-(1|2)$/)) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
Use str.includes
if(inputs[i].name.includes("actual-temp") || inputs[i].name.includes("min-temp") || inputs[i].name.includes("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
for (let item of my_list) {
if (item.charAt(item.length-1)!=="3"&&
(item.startsWith("actual-temp")|| item.startsWith("min-temp")||
item.startsWith("max-temp"))
) {
//logic goes here
}
}
when the first condition in the above if loop fails , javascript will not check the 3 items in OR statements (short circuiting comes into picture)
<form name="myform">
<fieldset>
<legend>Delivery Information</legend>
<p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p>
<p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p>
<p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p>
<p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p>
</fieldset>
</form>
So, I have a form and I want to get all input elements by name "textInput"(I have other inputs so it ha) using Javascrip DOM, and add an attribute "oninvalid="please, only use letters".
Only Javascript, so no JQuery.
You can use this function:
function changeAttributes() {
var x = document.getElementsByName("textInput");
for(var i = 0; i < x.length, i++) {
x[i].setAttribute("oninvalid", "please, only use letters");
}
}
Try below:
$('input[name=textInput]').attr("oninvalid", "please, only use letters");
I have a HTML form field to get the month from the user.
<input type="text" placeholder="MM" size="2" name="month">
I need the field to accept only 2 digits. I tried Form validation, but it allows the user to enter more than 2 digits and then display the validation message. I don't need any validation messages for the field, but the user should be restricted to enter only 2 digits max. Is there a way we can do this using jquery?
<input type="text" placeholder="MM" size="2" name="month" maxlength="2>
The maxlength attribute;
<input type="text" placeholder="MM" size="2" maxlength="2" name="month">
It limits the amount of text you can enter by straight up not allowing you to type more.
EDIT: added snippet
The easiest is using the type='number' attribute and setting max='12':
<input type='number' max='12' min='1'>
SNIPPET
input {
width: 4ex;
padding: 0 1px;
}
input:last-of-type {
width: 6.5ex;
}
<fieldset>
<legend>Enter Date</legend>
<label>Month:</label>
<input type='number' max='12' min='1'>
<label>Day:</label>
<input type='number' max='31' min='1'>
<label>Year:</label>
<input type='number' max='3000' min='2016'>
</fieldset>
This should help you out, whenever the user presses the key down it will check the lenght and then trim the extra chars if there are any:
$("input").keydown(function() {
var value = $(this).val();
if(value.length > 2) {
value = value.substring(0, 2);
$(this).val(value);
}
});
This is frustrating!
When the input type is text and I gave maxlength as 5, it is not allowing me to enter more than 5 characters
<input type="text" maxlength="5" />
If I gave input type as number and I gave maxlength as 5, it is allowing more than 5 digits?
<input type="number" maxlength="5" pattern="[0-9]*" />
Am I missing something?
PS: This is for mobile responsive site!
Instead of maxlength use max
<input type="number" min="1" max="10000" />
Update
Small jQuery plugin
(function ($) {
$.fn.maxlength = function (length) {
return this.on('keydown', function () {
var maxlength = length || parseInt($(this).attr('maxlength'), 10) ;
if (maxlength && $(this).val().length >= maxlength) {
$(this).val($(this).val().slice(0, maxlength - 1));
}
});
};
}($));
Example
try using max...
<input type="number" max="99999" />
EDIT: Showing Validation
<form id='FormValidation'>
<input id="myNum" type="number" min="1" max="99999" />
<input type="text" maxlength="5" />
<input type="submit" />
</form>
Try adding a number greater than 99999 and hitting submit, check the updated fiddle.
This jquery could help too...
$('#myNum').keyup( function(e){
var max = $('#myNum').attr('max').length;
if ($(this).val().length >= max) {
$(this).val($(this).val().substr(0, max));
}
});
replace maxlength with max
// Max Length = 5
<input type="number" max="99999" />
// length between 1 to 5
<input type="number" min="1" max="99999" />
Updated Answer. It's so simple!
<input type="number" id="nbr"/>
<input type="text" maxlength="5" />
$(document).on('keypress','#nbr', function(e){
if($(this).val().length >= 5)
{
e.preventDefault();
}
});
And you can add a max attribute that will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />