进行web前端开发,会经常遇到校验文本框内容的情形.比如校验用户输入的手机号是否合法.
其实我们可以从根本上减少用户犯错的机会,比如文本框只能输入数字,若输入非数字字符,则马上被删除.
界面:
第一个文本框,输入字母时会立即把字母替换为空字符串.
核心js方法:
/*
* 只能输入正整数,不能有小数点
*
*/
onlyIntegerKeyUp=function(e){
if(e===undefined){
e=window.event;
}
var obj=e.srcElement?e.srcElement:e.target;
var pattern = /[^\d]/ig;
var val=obj.value;
if(pattern.test(val)) {
var i=getCursortPosition(e);
obj.value=val.replace(pattern,'');
setCaretPosition(e,i);
}
};
/*******************************************************************************
* 获取光标位置
*
* @param ctrl
* @returns {Number}
*/
getCursortPosition=function(event) {// 获取光标位置函数
if (event === undefined || event === null) {
event = arguments.callee.caller.arguments[0] || window.event;
}
var obj = event.srcElement?event.srcElement:event.target;
var CaretPos = 0; // IE Support
if (document.selection) {
obj.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -obj.value.length);
CaretPos = Sel.text.length;
} else if (obj.selectionStart || obj.selectionStart == '0'){
// Firefox support
CaretPos = obj.selectionStart;
}
return (CaretPos);
};
/*******************************************************************************
* 设置光标位置
*
* @param ctrl
* @returns {Number}
*/
setCaretPosition=function(event, pos){// 设置光标位置函数
if (event === undefined || event === null) {
event = arguments.callee.caller.arguments[0] || window.event;
}
var obj = event.srcElement?event.srcElement:event.target;
if (pos > 0) {
pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置
}
if(obj.setSelectionRange){
obj.focus();
obj.setSelectionRange(pos,pos);
} else if (obj.createTextRange) {
var range = obj.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
/*
* 只能输入数字和字母
*
*/
onlyNumAndAlphKeyUp=function(event){
if(event===undefined){
event=window.event;
}
var obj=event.srcElement?event.srcElement:event.target;
var pattern = /[^\w]/ig;
if(pattern.test(obj.value)) {
var i=getCursortPosition(event);
obj.value=obj.value.replace(pattern,'');
setCaretPosition(event,i);
}
};
页面代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript" src="jquery-1.11.1.js"></script>
<script type="application/javascript" src="comm.js"></script>
</head>
<body>
只能输入数字: <input type="text" onkeyup="onlyIntegerKeyUp(event)"/><br>
<br>
只能输入数字和字母: <input type="text" onkeyup="onlyNumAndAlphKeyUp(event)"/><br>
</body>
</html>
为什么会有getCursortPosition()和setCaretPosition()
因为通过js替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.
comm.js见附件
相关推荐
当设计一个文本框（input type="text"）时，如果希望用户只能输入数字，无论是整数还是小数，都需要进行特定的验证。这个场景下，我们可以利用JavaScript来实现这一功能。下面我们将详细介绍如何使用JavaScript验证...
### 正则表达式在JavaScript中的应用：限制文本框只能输入数字及小数点 在Web开发中，经常需要对用户输入的数据进行合法性验证。为了确保数据格式正确且符合预期，开发者通常会在前端使用JavaScript结合HTML来实现...
这个插件的标题"jquery插件，是文本框只能输入数字"表明我们正在讨论一个特定的jQuery扩展，它的功能是限制用户在文本框中只能输入数字。这种功能在各种场景下都很实用，例如在线表单、财务输入或任何需要精确数字...
本教程将详细讲解如何使用JavaScript来实现一个功能，使得ASP.NET中的文本框只能输入数字，并且能够处理负数以及控制小数位数。 首先，我们需要在HTML（或ASP.NET的TextBox控件）中添加一个事件监听器，这个监听器...
### JS限制文本框只能输入数字（正则表达式） #### 背景介绍 在Web应用开发中，经常需要对用户输入的数据进行合法性验证。特别是在处理财务数据、统计数据时，确保用户只能输入数字是非常重要的。这不仅可以提高...
本文详细介绍了如何使用HTML和JavaScript限制一个文本框（input元素）仅允许用户输入数字和小数点，这是一种常见的前端开发需求，尤其适用于需要用户输入数字信息的表单中，比如价格、数量等字段。下面将详细说明...
本文实例介绍了jquery限定文本框只能输入数字的详细代码，分享给大家供大家参考，具体内容如下 先来一段规定文本框只能够输入数字包括小数的jQuery代码： <!DOCTYPE html> <html> <head> <meta ...
### JS限制文本框只能输入数字、小数点、英文字母、汉字的知识点解析 在Web开发中，经常需要对用户输入的数据进行合法性验证，确保数据格式符合预期的要求。例如，有时我们需要限定文本框内只能输入特定类型的字符...
限制文本框输入数字和小数点（方法二）** ```html ``` 这段代码较为复杂，通过多个事件监听器实现更细致的控制，如记录原始值和临时值等，确保输入符合要求。 **4. 限制文本框只能输入字母和汉字** ```html (/...
### js完美解决JSP文本框限制只能输入数字、小数问题 在Web开发过程中，确保用户输入的数据符合预期格式是一项非常重要的任务。特别是在涉及到数值输入时，开发者常常需要限制文本框仅能接受数字或者带有一定数量...
在探讨如何利用JavaScript限制文本框只输入正整数这一主题时，我们首先应当明确目标：确保用户在文本框中输入的数据仅包含正整数，即非负整数（不包括小数、负数以及任何非数字字符）。这在许多场景下至关重要，比如...
- 此处使用正则表达式 `[^\d|chun]` 来限制输入框只能输入数字或特定字符（这里用 `chun` 作为示例）。 #### 方法七：限制输入框只接受特定格式的小数 ```html ((event.keyCode || event.keyCode > 57) && event....
标题 "限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数" 提供了一个编程需求，即如何在文本框（Text Box）中限制用户只能输入数字，包括整数和浮点数。在网页或应用程序的用户界面设计中，这样的...
本文将重点介绍如何利用正则表达式限制文本框只能输入数字、小数点、英文字母以及汉字，并给出具体的实现方式。 #### 三、具体应用场景与实现方法 ##### 1. 只允许输入数字（不包含小数点） ```html (/\D/g,'')" ...
以下是对标题和描述中提到的几种限制文本框只能输入数字或字母方法的详细说明： 1. **只能输入字母和汉字** 这段代码使用了`onkeyup`和`onbeforepaste`事件来处理输入。它通过正则表达式`/[\d]/g`匹配所有数字，并...
#### 四、限制文本框输入数字（含小数点），同时处理特殊场景 当需要对输入的小数进行更细致的控制时，例如限制小数点后最多两位数，可以使用以下代码： ```html (/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" onblur=...
6. **文本框只能输入数字，不允许小数点** ```html (/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> ``` 这里使用`\D`匹配任何非数字字符并移除它们。 7. **只能输入数字，包括小数点** ...