js文本框输入限制

最新推荐文章于 2023-09-18 19:42:39 发布
最新推荐文章于 2023-09-18 19:42:39 发布
阅读量807 收藏
点赞数
分类专栏： Java基础 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmjudas/article/details/43761305
版权 
<script>
var _isChecked=false;//必须放在函数外
function change(obj,type,unsigned)
{
/*
*obj:要检查的文本框对象,一般调用的时候请填this检查本身,
*type:要输入的数据类型,整数请输入integer,小暑请输入double
*unsigned:限制数据是非负数请填true,允许输入负数请填false
*例:
*<input style="ime-mode:disabled" onpropertychange=change(this,"integer",true)>
*为限制只允许输入非负整数
*其中的style="ime-mode:disabled"必须添加,因为部分输入法会与脚本冲突使IE崩溃,而且数字文本框也没有输入中文的必要
*/
if(type.toUpperCase()!=new String("integer").toUpperCase())
type="double";
else
type="integer";

if(unsigned)
unsigned=true;
else
unsigned=false;

if(!_isChecked)
{
_isChecked=true;
var str=new String(obj.value);
var num=new Number(obj.value);
var ok=true;
if(unsigned)
ok=str.match("-")==null;
if(type=="integer"&&ok)
ok=str.match("\\.")==null;
/*  \.是正则表达式中代替小数点的方法，但是因为match函数中要求输入一个字符串参数，所以要用\\来代替\，所以最终用\\.来代替小数点  */
if(num.toString()=="NaN"&&str!="-")
ok=false;
if(obj.value.match("\\-0\\d|\\b^\\.?0\\d"))
ok=false;//避免输入01,-0000.01之类的数字
if(!ok)
obj.value=obj.backupValue==undefined?"":obj.backupValue;
else
{
/*tmp=num.toString();
if(obj.value.charAt(obj.value.length-1)=='.')
tmp+=".";
if(obj.value.charAt(0)=='-'&&num==0)
tmp="-"+tmp;
alert(tmp);*/
matchStr=obj.value.match("\\-?\\b[0-9]*\\.?[0-9]*\\b\\.?|\\-");//用正则表达式清空前后空格
if(matchStr!=obj.value)
{
obj.value=matchStr==null?"":matchStr;
_isChecked=true;
}
obj.backupValue=obj.value;
}
}
else
{
_isChecked=false;//避免无限递归
return;
}
}

</script>

<body>
<table width="100%" height="100%">
<tr><td>

<table border=1 style="font-size=12px;color:#777777" align="center">
<form action="" name=form1>
<tbody>
<tr>
<td colspan="2"><b>输入限制测试：</b></td>
</tr>
<tr>
<td>可以输入小数：</td>
<td><input style="ime-mode:disabled;border-width:0" type=text name="double" size="16" maxlength="16" onpropertychange=change(this,"double",false)></td>
</tr> <!--ime-mode:disabled必须要有,因为如果开启输入法的话可能会使浏览器崩溃--> 
<tr>
<td>只可以非负输入小数：</td>
<td><input style="ime-mode:disabled;border-width:0" type=text name="unsigned_double" size="16" maxlength="16" onpropertychange=change(this,"double",true)></td>
</tr>
<tr>
<td>允许输入整数：</td>
<td><input style="ime-mode:disabled;border-width:0" type=text name="int" size="16" maxlength="16" onpropertychange=change(this,"integer",false)></td>
</tr>
<tr>
<td>只允许输入非负整数：</td>
<td><input style="ime-mode:disabled;border-width:0" type=text name="unsigned_int" size="16" maxlength="16" onpropertychange=change(this,"integer",true)></td>
</tr>
</tbody>
</form>
</table>

</td></tr>
</table>
</body>

声明：该js是前段时间做项目时百度出来用过的，原文找不到了，只好自己写一个，望作者看到后海涵 
 


                

        

        

    




    

      

        

            

              
                
                  LMJudas
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
javascript限制文本框输入值类型的方法

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了javascript限制文本框输入值类型的方法,涉及javascript鼠标事件、键盘按键及字符串的相关操作技巧,非常具有实用价值,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
js文本框限制输入  多种情况

				
			

			

				

					09-01
				

			

		

		

			
				
1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 4.只能输入字母和汉字 等等

			
		

	



                


  
              

                


	

		

			

				
					
通过JavaScript正则表达式限制input输入框的输入内容

					
最新发布

				
			

			

				

					tianxianghuiwei的博客
				

				

					09-18
					
					1197
					
				

			

		

		

			
				
a-input onchange="if(/\D/.test(this.value)){alert('只能输入数字');9.限制input输入框除了英文的标点符号以外，其他的都可以。

			
		

	





	

		

			

				
					
js限制输入框的输入类型

				
			

			

				

					Guojun19900715的博客
				

				

					06-19
					
					460
					
				

			

		

		

			
				
js 限制input等输入框的输入类型(数字, 数字和字母, 身份证号, 中文 等

			
		

	



		

			
		



	

		

			

				
					
使用js控制input填写的限制，比如只能写数字和英文,不能输入中文

				
			

			

				

					黑猫警长博客
				

				

					04-01
					
					7018
					
				

			

		

		

			
				
1、只能输入英文字母和数字,不能输入中文


<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> 

2、只能输入字母和汉字


<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxleng

			
		

	





	

		

			

				
					
利用JS限制文本框输入字数

				
			

			

				

					weixin_41515124的博客
				

				

					08-14
					
					3168
					
				

			

		

		

			
				
这样的效果实现是比较简单的，我们先分析下。

当我们在某个文本框输入文本时，会提示当前文本还可以输入的字数，并且一旦超出所限制的字数数，将无法输入进去。

它有个这样的过程：

1.当文本框获得焦点时

要用到：onfocus

2.当文本框内内容改变时（实时获取）

要用到：oninput

我们要获取当前输入的文本长度，以及所限制的字数，（自己定义。）；

随后要用到if语句去做判断，超出，未超出。执行不同的语句。



其中还有一点需要注意，当文本超出后，文本框里的内容没有随着后面的输入而变...

			
		

	





	

		

			

				
					
js控制文本框的输入

				
			

			

				

					weixin_44541176的博客
				

				

					02-05
					
					977
					
				

			

		

		

			
				
1.文本框只能输入数字代码(小数点也不能输入)

2.只能输入数字,能输小数点.

3.只能输入字母和汉字
&lt;input onkeyup="value=value.replace(/[\d]/g,’’) "onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[\d]/g,’’))...

			
		

	





	

		

			

				
					
js实现文本框输入文字个数限制代码

				
			

			

				

					11-26
				

			

		

		

			
				
通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。...

			
		

	





	

		

			

				
					
JS限制文本框只能输入数字和字母方法

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了JS限制文本框只能输入数字和字母方法,本文给出了限制只能输入数字、限制只能输入字母、限制只能输入数字和字母3种脚本,需要的朋友可以参考下

			
		

	





	

		

			

				
					
js-文本框输入限制.docx

				
			

			

				

					11-25
				

			

		

		

			
				
js_文本框输入限制.docxjs_文本框输入限制.docx

			
		

	





	

		

			

				
					
JS 对输入框进行限制(常用的都有)

				
			

			

				

					12-01
				

			

		

		

			
				
1.文本框只能输入数字代码(小数点也不能输入)  代码如下: <input onkeyup=”this.value=this.value.replace(/\D/g,”)” onafterpaste=”this.value=this.value.replace(/\D/g,”)”>  2.只能输入数字,能输小数点.  代码如下: <input onkeyup=”if(isNaN(value))execCommand(‘undo’)” onafterpaste=”if(isNaN(value))execCommand(‘undo’)”> <input name=txt1 onchange=”if

			
		

	





	

		

			

				
					
文本框输入内容控制（JS，输入限制，数据校验，鼠标焦点）

				
			

			

				

					01-30
				

			

		

		

			
				
文本框输入内容控制（JS，输入限制，数据校验，鼠标焦点），一些开发经营积累，分享给大家。

			
		

	





	

		

			

				
					
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

				
			

			

				

					jp2021的博客
				

				

					10-25
					
					6066
					
				

			

		

		

			
				
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

			
		

	





	

		

			

				
					
js限制输入框只能输入数字

				
			

			

				

					qq_46269308的博客
				

				

					08-02
					
					5866
					
				

			

		

		

			
				
js限制输入框只能输入数字

			
		

	





	

		

			

				
					
控制输入框字数 js

				
			

			

				

					xxpxxpoo8的专栏
				

				

					11-12
					
					588
					
				

			

		

		

			
				
<textarea id="return_message" name="return_message" maxlength="200" class="w400 textarea_text"></textarea>


//控制输入框字数
            $("#return_message").on('keyup', function () {
                var msg = $('textarea[name="return_message"]').va.

			
		

	





	

		

			

				
					
JS 控制文本框只能输入中文、英文、数字与指定特殊符号（屏蔽表情输入）

					
热门推荐

				
			

			

				

					zhaofuqiangmycomm的博客
				

				

					08-02
					
					1万+
					
				

			

		

		

			
				
onkeyup:释放键盘事件

onpaste：粘贴事件

oncontextmenu ：鼠标右击事件

控制这三种事件的输入



onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5\w]/g,'')"

只能输入数字：

onkeyup="value=value.replace(/[^\d]/g,'') "

只能输入数字和字母...

			
		

	





	

		

			

				
					
JS限制文本框输入

				
			

			

				

					*子夜流星*
				

				

					02-16
					
					174
					
				

			

		

		

			
				

1、写一个方法，方法内容如下，限制条件为正则表达式，不同的限制编写不同的正则即可。
 var patt = /[^A-Z0-9\s\.\/\-\&amp;]/; var realkey = String.fromCharCode(event.keyCode); if(patt.test(realkey)){  event.returnValue=false; }
 
2、在要限制输入的文...

			
		

	





	

		

			

				
					
JS限制文本框输入字符串长度

				
			

			

				

					梅阳博客
				

				

					03-12
					
					871
					
				

			

		

		

			
				


 

 

 

//验证输入字符长度
function limitLength(value, byteLength, title, attribute) {
var newvalue = value.replace(/[^\x00-\xff]/g, "**");
var length = newvalue.length;
//当填写的字节数小于设置的字节数
if (...

			
		

	





	

		

			

				
					
js限制文本框输入长度两种限制方式(长度、字节数)

				
			

			

				

					技术人生的博客
				

				

					12-09
					
					9969
					
				

			

		

		

			
				
功能/特点：
1.实时显示可输入的字数（字节数）
2.两种限制方式（长度、字节数）
3.中文输入法下可正常使用，无BUG
4.同一页面可以使用多个，相互不干扰limit.js

复制代码 代码如下:


function limit(){
var txtNote;//文本框
var txtLimit;//提示字数的input
var limitCount;//限制的字数
var isbyte;//...

			
		

	





	

		

			

				
					
Jquery 限制文本框输入字数

				
			

			

				

					06-09
				

			

		

		

			
				
您可以使用 jQuery 的 keyup 和 keydown 事件来限制文本框输入的字数。下面是一个简单的示例代码：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>限制文本框输入字数</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput" maxlength="10">
  <div id="remainingChars"></div>
  <script>
    $(document).ready(function() {
      var maxLength = $("#myInput").attr("maxlength");
      $("#remainingChars").html(maxLength + " characters remaining");
      $("#myInput").on("keyup keydown", function() {
        var currentLength = $(this).val().length;
        var remainingLength = maxLength - currentLength;
        $("#remainingChars").html(remainingLength + " characters remaining");
        if (remainingLength < 0) {
          $(this).val($(this).val().substr(0, maxLength));
        }
      });
    });
  </script>
</body>
</html>
```

在上面的示例代码中，我们将文本框的最大长度设置为10。然后我们使用 jQuery 的 keyup 和 keydown 事件来监听用户在文本框中输入的内容。在事件处理程序中，我们获取当前输入内容的长度，并计算出剩余可输入的字符数。如果用户输入的字符数超过了最大长度，我们就截取前面的字符，保证输入内容不会超过最大长度。最后，我们将剩余可输入字符数显示在页面上。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值