JS限制输入框输入的实现代码

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(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3.数字和小数点方法二

代码如下:

<input type=text tvalue="" ovalue="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.ovalue=this.value}">

4.只能输入字母和汉字

代码如下:

<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

5.只能输入英文字母和数字,不能输入中文

代码如下:

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

6.只能输入数字和英文<font color="Red">chun</font>

代码如下:

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:

代码如下:

<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:

代码如下:

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
//只能输入汉字:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
//只能输入数字:
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
//只能输入英文和数字:
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
//控制输入框只能输入文字或数字,也可以不允许输入特殊字符
//这里不允许输入如下字符: (像 !@#$%^&* 等)<br>
<textarea rows=2 cols=20 name=comments onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;">
//只禁止空格输入
onkeyup="value=value.replace(/\s/g,'')"
//只能输入中文和英文:
onkeyup="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))"  

总结

以上所述是小编给大家介绍的JS限制输入框输入的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Extjs表单输入框异步校验的插件实现方法

    一.效果如图所示 特点: 1.异步后台校验不会对用户操作产生阻塞感: 2.可在用户停止输入后自动校验,避免频繁进行无谓的后台校验: 3.以插件方式实现,方便使用: 二.插件源码如下: /** * Created by jiawenjun on 2016/10/19. */ Ext.define('Ext.ux.plugins.FieldAjaxVerify',{ extend: 'Ext.AbstractPlugin', alias: 'plugin.fieldajaxverify', buff

  • JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • JS解决移动web开发手机输入框弹出的问题

    在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th

  • JS验证input输入框(字母,数字,符号,中文)

    只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

  • JavaScript输入框字数实时统计更新

    在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新 下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message  message.css     message.js     message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar

  • js模拟支付宝密码输入框

    本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> input{ width:60px; height:60px; fon

  • JS限制输入框输入的实现代码

    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')"

  • Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • js禁止小键盘输入数字功能代码

    复制代码 代码如下: function isNum()//判断小键盘输入数字 { var str=(window.event.keyCode); if(str>105 || str<96 ) { if (str!=8 ) { window.event.returnValue=false; return; } } } function isNumUp()//判断主键盘输入数字 { var str=(window.event.keyCode); if(str>57 || str<48

  • js实现匹配时换色的输入提示特效代码

    本文实例讲述了js实现匹配时换色的输入提示特效代码.分享给大家供大家参考.具体如下: 这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色,着重显示出来,与输入框下拉提示是基本是一样的,只是换了一个方式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tips-cha-color-codes/ 具体代码如下: <html> <head> <meta htt

  • 纯JS实现只能输入数字的简单代码

    只能输入数字 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

  • JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

    本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击"运行代码"后的效果,使用时,你只需将需要运行的HTML代码拷贝到文本框内,点击对应的功能按钮即可. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE>直接页面显示器</TITLE> <STYLE type=&q

  • js实现可输入可选择的select下拉框

    本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="

  • js判断输入框不能为空格或null值的实现方法

    实例如下所示: var sno = $('#sno').val(); var sname = $('#sname').val(); if((sno.indexOf(" ") >= 0 || sno == null) || (sname.indexOf(" ") >= 0 || sname == null)){ alert('学号和名称不能为空格或null值'); return; }else{ } 以上这篇js判断输入框不能为空格或null值的实现方法就是

随机推荐