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

fasterjie

2019-04-26

本文实例讲述了javascript限制文本框输入值类型的方法。分享给大家供大家参考。具体分析如下：

要求：所有的文本框，只能输入数字和小数点，其他的符号一概不能输入；

重点是我希望在用户输入时就做限制，而不是提交时判断――也就是说如果用户在文本框内输入数字或小数点，可以正常输入；如果输入字母等非数字字符，则文本框会没有任何反应，不会显示输入的字符。

<html>
<body>
<script>
var s = "<input type=\"text\" size=\"20\" " +
"style=\"text-align:center\" " +
"onkeydown=\"if(event.keyCode>57&&event.keyCode!=190) return false\" "+ 
//限制只能输入数字
"onblur=\"value=value.replace(/[^0-9\.]/g,'')\" " + 
//限制鼠标点击输入非数字
"onbeforepaste=\"clipboardData.setData(\"text\"," + 
//限制只能粘贴数字
"clipboardData.getData(\"text\").replace(/[^0-9\.]/g,''))\">";
document.write(s);
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

文本框 javascript

fasterjie

0 关注 0 粉丝 0 动态

相关推荐

巧妙利用selenium中的JS操作来处理特殊的文本框

　　1.日期框：无法直接输入文本，必须要选择某一天的日期并点击才会填入文本框；当我们把第一个标签的value的值改变为“SHH”，第二个标签的value的值改变为“上海”时，文本框自动变更为“上海”，到达地检索框的操作方法一致。

王练 2020-06-12

很有点意思的特效，本人很喜欢

jquery图片对联广告制作jQuery侧面浮动图片广告点击》jquery图片对联广告制作jQuery侧面浮动图片广告jquery浮动对联图片广告制作一个侧面浮动图片广告特效，类似滚屏效果的图片广告。id=c1ch0cb0jjQuery幻灯片图片切换制作F

81463166 2020-05-16

解决selenium WebElement 里 getText()方法返回值为空的问题

在一次项目测试中，执行如下语句，getText()返回结果为空，根据网上资料，如果 isDisplayed() 为false会造成getText()拿不到值，但检查isDisplayed()返回值为true，排除这种可能，不知道什么原因导致拿不到文本框的值

Reiki 2020-05-04

贡献一下多年珍藏的特效例子

jquery拖动排序插件制作选项列表拖动排序代码点击》jquery拖动排序插件制作选项列表拖动排序代码jQuery列表拖动，自由拖动，拖动排序，拖动排序插件。id=00b1ibhaajquery手机拨号，拨号界面，phone界面，网页手机拨号。jQuery

82550495 2020-05-01

Uni-app基础实战富文本框解析 WordPress rest api实例（二）

官方的富文本框有markdown和html两种方式，但是样式欠佳！官网可以一键导入，直接点击hbuilder x导入就ojbk。另外新建界面和界面配置这边不说啦，如果有需要可以看上面文章或者之前更早的文章。在用浏览器运行应该就可以看到我是html代码这

zcl 2020-03-04

216 jQuery 文本属性值：html() 、text() 、 val()

jQuery的文本属性值常见操作有三种：html() 、text() 、 val() ，分别对应JS中的 innerHTML 、innerText 和 value 属性。

donghongbz 2020-01-17

VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法。分享给大家供大家参考，具体如下：。我们在使用vue 编写代码时，我们有一个多行文本框控件，希望在页面点击一个按钮在文本框焦点位置插入一个 {pk}的数据。发现插入

tangfenjuan 2019-12-02

JS正则(RegExp)判断文本框中是否包含特殊符号

有时，我们希望判断文本框中用户输入的字符是否含有特殊符号，就像用户注册时密码框的填写。flag 规则对象中还有很多其他特殊字符，这里的demo已经足够使用，如项目另有需求加入其他特殊字符即可。以上所述是小编给大家介绍的JS正则判断文本框中是否包含特殊符号,

heshanking 2019-10-29

正则表达式(RegExp)判断文本框中是否包含特殊符号

有时，我们希望判断文本框中用户输入的字符是否含有特殊符号，就像用户注册时密码框的填写。flag 规则对象中还有很多其他特殊字符，这里的demo已经足够使用，如项目另有需求加入其他特殊字符即可。以上所述是小编给大家介绍的正则表达式判断文本框中是否包含特殊符号

Passerby 2019-10-28

Jquery对表单、表格的操作以及应用

（３）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。就是说，当

89463661 2019-11-05

jQuery中获取或设置元素值

在jquery中，如果要获取元素的值，是通过val（）方法实现的，其语法格式如下所示： val. 该方法常用于表单中获取或设置对象的值。varstrSel=$.val().join(",");//获取下拉列表框所选中全部选项值。因此$.

Clarence 2011-11-18

仿百度搜索时的下拉列表（jQuery实现）

当我们使用百度或是谷歌进行搜索时，只要输入一个字母就可以产生一个下拉列表，并且可以通过键盘上下键来控制列表项的选择。最近在项目中也碰到了类似的情况，在文本框中输入某个字母就可以出现一个下拉列表，展现从数据库里搜索过来的结果。首先要使用ajax的话，就想到可

chang00 2015-06-17

jQuery文本框中的事件应用

"); }); $.blur(function () { //文本框丢失焦点事件 var vTxt = $("#txtEmail").val(); if (vTxt.length == 0) { //文本框中是否输入了邮箱 $

xuewenke 2012-05-19

jQuery的单行文本框操作

我们可以对文本框进行我们需要的操作，这次我们讲解通过获取和失去焦点来改变样式。我们现在先来解释下焦点，焦点是在页面上屏幕中闪动的的小竖线，鼠标点击可获得光标，Tab键可按照设置的Tabindex切换焦点。但是IE6不支持除超链接之外的：hover伪类选择符

87281248 2018-03-13

表单介绍

两者的不同将在后台处理中进行解释。label标签：用来辅助文本输入框，在点击label时可以直接进入文本框。password：密码框，输入的内容均以点显示。只有name相同的checkbox才算是一组信息。通过value来修改按钮的显示文字。placeho

zZoOoOJaVa 2018-02-19

javascript 输入文本框时的友好提示

var ttop = tt.offsetTop-tt.clientHeight+vpos; //TT控件的定位点高

mianhuantang 2009-12-11

HTML中的文本框textarea标签

<textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于<form></form>标志对之间。<textarea>具有以下属性：。cols这文字区块的宽度。rows

srchange 2019-08-19

js中用正则表达式过滤特殊字符 ,校验所有输入域是否含有特殊符号

&*（）——|{}‘；：”“'。，、？]"). *所要过滤的符号写入正则表达式中，注意，一些符号要用'\'转义.*alert("表单中所有文本框通过校验！alert("文本框中不能含有\n\n1单引

echoright晓戈 2011-11-21

vue element ui form表单多个Input框点击enter实现搜索

假如限制文本框name不能输入数字和小数点，等等，就针对某个文本框加keyup.native事件，整个表单如果文本框想点击Enter键实现搜索给表单加keyup.enter.native事件

yuqiuyao 2018-11-23

jQuery的单行文本框操作

我们可以对文本框进行我们需要的操作，这次我们讲解通过获取和失去焦点来改变样式。我们现在先来解释下焦点，焦点是在页面上屏幕中闪动的的小竖线，鼠标点击可获得光标，Tab键可按照设置的Tabindex切换焦点。});现在经过处理后在IE6中也能达到想要的效果。

Vipwxs 2018-03-13

fasterjie

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号