De forma predeterminada, el campo de entrada de HTML 5 tiene el tipo de atributo = «número» que se utiliza para obtener la entrada en formato numérico. Ahora forzando el tipo de campo de entrada = «texto» para aceptar valores numéricos solo mediante Javascript o jQuery. También puede establecer el atributo type=”tel” en el campo de entrada que mostrará el teclado numérico emergente en los dispositivos móviles. Hay muchas otras formas de forzar el campo de entrada para que acepte solo números de entrada.
Los siguientes ejemplos explicarán cómo forzar números de fuerza de campo de entrada.
- Mediante el uso de código ASCII
- Usando replace(), función isNan()
Ejemplo 1: El ejemplo a continuación ilustra Input[type=”text”] que solo permite el valor numérico usando Javascript con la ayuda del código ASCII.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
div {
width: 400px;
height: 130px;
border: 2px solid black;
padding: 15px;
position: absolute;
left: 27%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeks
</h1>
<h3>
Force input field to take only numbers as an input
</h3>
</center>
<div class="container">
<form name="inputnumber"
autocomplete="off">
<b>Register No:</b>
<input type="text"
onkeypress="return onlyNumberKey(event)"
maxlength="11"
size="50%" />
<br>
<br>
<b>Ph. Number:</b>
<input type="tel"
size="50%"
onkeypress="return onlyNumberKey(event)" />
<br>
<br>
<center>
<b>Age:</b>
<input type="number"
placeholder=" Only 12+ allowed"
min="12" />
<input type="submit"
value="Submit"
onclick="return detailssubmit()">
</center>
</form>
</div>
</body>
<script>
function onlyNumberKey(evt) {
// Only ASCII character in that range allowed
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
}
</script>
<script>
function detailssubmit() {
alert("Your details were Submitted");
}
</script>
</html>
Producción:
Ejemplo 2: El ejemplo a continuación ilustra que Input[type=”text”] permite solo valores numéricos usando Javascript con la ayuda del método replace() de jQuery y la función isNaN() de javascript .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeks</h1>
<h3>
Input[type=text] allow only
Numeric Value Example
</h3>
<br>
<form autocomplete="off" id="form1">
<b>Enter 4-digit Pin:</b>
<input type="text" name="numonly"
maxlength="4">
<br>
<br>
<b>Enter passkey:</b>
<input type="text" name="passkey"
id="num"
oninput="return onlynum()"
minlength="2">
</form>
</center>
</body>
<script>
$(function() {
$("input[name='numonly']").on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
});
</script>
<script>
function onlynum() {
var fm = document.getElementById("form2");
var ip = document.getElementById("num");
var tag = document.getElementById("value");
var res = ip.value;
if (res != '') {
if (isNaN(res)) {
// Set input value empty
ip.value = "";
// Reset the form
fm.reset();
return false;
} else {
return true
}
}
}
</script>
</html>
Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA