html5中如何设置输入框仅允许输入数字
6个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正则 只能输入数字</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/.css" />
</head>
<body>
<input type="text" id="txt" />
<button id="btn">确定</button>
<script>
var txt = document.getElementById('txt')
var btn = document.getElementById('btn')
var reg = /^\d*$/
btn.onclick = function(){
var val = txt.value
if( !reg.test(val)){
alert('只能输入数字！')
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>正则 只能输入数字</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/.css" />
</head>
<body>
<input type="text" id="txt" />
<button id="btn">确定</button>
<script>
var txt = document.getElementById('txt')
var btn = document.getElementById('btn')
var reg = /^\d*$/
btn.onclick = function(){
var val = txt.value
if( !reg.test(val)){
alert('只能输入数字！')
}
}
</script>
</body>
</html>
追问
这个我在dw上面试了，也可以输入汉字和英文的。我想要的是只能输入数字，其他的全部都是非法的。我是新手，对于写前端没什么经验，很多东西都不太懂，你可以写的仔细点吗？谢谢
追答
我肯定是试过之后才发给你的
var reg = /^\d*$/
这个是正则 \d 表示数字
如果输入框的值不是数字 点击按钮 会有提示
输入什么都是可以的 但只会在点击按钮时候会去判断 如果非法就不让保存之类
或者你把触发的条件改下 变成 按下键盘就触发 类似下面 如果输入一个非数字就弹出报错
txt.onkeyup = function(){
var val = txt.value
if( !reg.test(val)){
alert('只能输入数字！')
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
dw里点击这个文本框，本来的代码是这样的:
<input type="text">
改成:
<input type="text" onkeypress="return /^\d$/.test(this.value)">
<input type="text">
改成:
<input type="text" onkeypress="return /^\d$/.test(this.value)">
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<input type="text" onkeydown="str(e)">
function key(e)
{
var key = window.event ? e.keyCode:e.which;
var keychar = String.fromCharCode(key);
if(keychar<'0'||keychar>'9')
alert("非法输入");
}
function key(e)
{
var key = window.event ? e.keyCode:e.which;
var keychar = String.fromCharCode(key);
if(keychar<'0'||keychar>'9')
alert("非法输入");
}
追问
这我有点看不太懂，我写前端还只是个小菜鸟，刚开始学、、、你能写的详细点吗？谢谢啦
追答
function str(e)
{
var key = window.event ? e.keyCode:e.which;
var keychar = String.fromCharCode(key);
if(keychar'9')
{
$("#stri").val($('#copy').val());
}
else
$("#copy").val($('#stri').val());
}
这个实现了，用的jq，你上网上搜一下jquery，下一个，路径自己改。jquery是js的一个库
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<input type="number" />
在支持html5的浏览器才支持
在支持html5的浏览器才支持
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function validateDigitsOnly(evt) {
var e = evt || window.event,
key = e.keyCode || e.which;
if (
// Backspace, Tab, Enter, Esc, Delete
key == 8 || key == 9 || key == 13 || key == 27 || key == 46 ||
// Ctrl + A
(key == 65 && event.ctrlKey === true) ||
// Home, End, 四个方向键
key >= 35 && key <= 40) {
return;
}
if (e.shiftKey || e.altKey || e.ctrlKey) {
return false;
}
var el = e.target || e.srcElement,
// 最大数字长度
nl = el.getAttribute("data-numbers") || 15,
// 最大小数长度
dl = el.getAttribute("data-decimals") || 2,
val = el.value,
// "." 位置
dotIndex = val.indexOf("."),
rng = caret.call(el),
// 光标在"."左边
rLeft = rng.end <= dotIndex,
// 光标在"."右边
rRight = rng.begin > dotIndex;
if (
// 数字
key >= 48 && key <= 57 ||
// 数字键盘输入的数字
key >= 96 && key <= 105) {
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
return;
// 选中部分文本再做一次处理
val = val.substring(0, rng.begin) + val.substring(rng.end);
dotIndex = val.indexOf(".");
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
return;
}
else if (
// ".", ","
(key == 190 /*|| key == 188*/ ||
// 数字键盘上的 ".", ","
key == 110/*|| key == 109*/) &&
// 允许输入小数
dl > 0) {
if (
// 未输入".", 且输入的位置后面的小数位数未达到上限
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
// 输过".", 且选中部分文本包含"."
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
return;
}
return false;
}
// 验证输入的值
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
if (
// 未输入过"."
dotIndex == -1 && val.length < nl ||
// 光标位置在"."之前
rLeft && val.substring(0, dotIndex).length < nl ||
// 光标在"."之后且未达到小数上限
rRight && val.substring(dotIndex + 1).length < dl)
return true;
return false;
}
// 获取光标位置
function caret() {
var begin, end;
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { begin: begin, end: end };
}
具体使用方法如下：
<input type="text" id="t1" />
<input type="text" id="t2" data-numbers="5" data-decimals="4" />
<script>
document.getElementById("t1").onkeydown = validateDigitsOnly;
document.getElementById("t2").onkeydown = validateDigitsOnly;
</script>
var e = evt || window.event,
key = e.keyCode || e.which;
if (
// Backspace, Tab, Enter, Esc, Delete
key == 8 || key == 9 || key == 13 || key == 27 || key == 46 ||
// Ctrl + A
(key == 65 && event.ctrlKey === true) ||
// Home, End, 四个方向键
key >= 35 && key <= 40) {
return;
}
if (e.shiftKey || e.altKey || e.ctrlKey) {
return false;
}
var el = e.target || e.srcElement,
// 最大数字长度
nl = el.getAttribute("data-numbers") || 15,
// 最大小数长度
dl = el.getAttribute("data-decimals") || 2,
val = el.value,
// "." 位置
dotIndex = val.indexOf("."),
rng = caret.call(el),
// 光标在"."左边
rLeft = rng.end <= dotIndex,
// 光标在"."右边
rRight = rng.begin > dotIndex;
if (
// 数字
key >= 48 && key <= 57 ||
// 数字键盘输入的数字
key >= 96 && key <= 105) {
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
return;
// 选中部分文本再做一次处理
val = val.substring(0, rng.begin) + val.substring(rng.end);
dotIndex = val.indexOf(".");
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
return;
}
else if (
// ".", ","
(key == 190 /*|| key == 188*/ ||
// 数字键盘上的 ".", ","
key == 110/*|| key == 109*/) &&
// 允许输入小数
dl > 0) {
if (
// 未输入".", 且输入的位置后面的小数位数未达到上限
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
// 输过".", 且选中部分文本包含"."
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
return;
}
return false;
}
// 验证输入的值
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
if (
// 未输入过"."
dotIndex == -1 && val.length < nl ||
// 光标位置在"."之前
rLeft && val.substring(0, dotIndex).length < nl ||
// 光标在"."之后且未达到小数上限
rRight && val.substring(dotIndex + 1).length < dl)
return true;
return false;
}
// 获取光标位置
function caret() {
var begin, end;
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { begin: begin, end: end };
}
具体使用方法如下：
<input type="text" id="t1" />
<input type="text" id="t2" data-numbers="5" data-decimals="4" />
<script>
document.getElementById("t1").onkeydown = validateDigitsOnly;
document.getElementById("t2").onkeydown = validateDigitsOnly;
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
