首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动手写个数字输入框2:起手式——拦截非法字符

前言  最近在用Polymer封装纯数字输入框,开发过程中发现不是坑,也有不少值得研究的地方。...本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输入框1:input[type=number]的遗憾》 《动手写个数字输入框2:起手式——拦截非法字符》 《动手写个数字输入框3:痛点——输入法是个魔鬼...》 《动手写个数字输入框4:魔鬼在细节——打磨光标位置》 从源头抓起——拦截非法字符  从《动手写个数字输入框1:input[type=number]的遗憾》中我们了解到input[type=number...]基本不能满足我们的需求,为了简单化我们就直接在input[type=text]上加工出自己的数字输入框吧。  ...因此我们要继续补充下面两步,并且由于keydown事件触发时value值还没被修改,于是我们需要将value值和当前输入值做组合来做预判,进一步扩大非法字符集。

87780
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaWeb day3 JavaScript入门

    标签 标签不能自闭合 在页面中引入外部js文件时,不能写成 <script src=".....,和java语言基本都相同 组成<em>字符</em>可以是任何字母、<em>数字</em>、下划线(_)或美元符号($) <em>数字</em><em>不能</em>开头 建议使用驼峰命名 JavaScript 中 var 关键字有点特殊,有以下地方和其他语言不一样 作用域...如下图,当点击了<em>输入框</em>后,<em>输入框</em>就获得了焦点。而下图示例是当获取焦点后会更改<em>输入框</em>的背景颜色。 onblur 失去焦点事件。...正则表达式定义了<em>字符</em>串组成的规则。也就是判断<em>指定</em>的<em>字符</em>串是否符合<em>指定</em>的规则,如果符合返回true,如果不符合返回false。 正则表达式是和语言无关的。...:代表任意单个<em>字符</em>,除了换行和行结束符 \w:代表单词<em>字符</em>:字母、<em>数字</em>、下划线(),相当于 [A-Za-z0-9] \d:代表<em>数字</em><em>字符</em>: 相当于 [0-9] 量词: +:至少一个

    7.4K20

    web前端学习:HTML5十个新特性

    autofocus:自动获得输入焦点                             form:指定输入元素所从属的表单,可以实现输入框放在表单外部并能被提交的效果...                   验证属性(了解即可):                             required:输入框内容不能为空                            ...min:允许输入数字最小值                             max:允许输入数字最大值                             minlength:允许输入字符串最小长度...                            maxlength:允许输入字符串最大长度                             pattern:输入框内容必须符合的正则表达式...Canvas与SVG的不同: (1)Canvas是位图;SVG是矢量图 (2)Canvas是JS绘图技术(不是DOM元素);SVG是标签绘图技术(是DOM元素) (3)Canvas内容不能使用CSS;SVG

    2.9K10

    微信小程序开发实战(9):单行输入和多行输入组件

    String类型,输入框为空时显示的文本 placeholder-style:String类型,指定 placeholder 的样式 placeholder-class:String类型,指定 placeholder...auto-focus:Boolean类型,默认值是false,该属性为true,可以当前输入框自动获得焦点,并且自动弹出软键盘。...同一个wxml文件中,只能有一个输入框设置该属性为true,输入框还包括后面要介绍的textarea组件 focus:Boolean类型,默认值是false,该属性可以输入框获的焦点,目前开发工具暂不支持...处理函数可以直接 return 一个字符串,将替换输入框的内容 bindfocus :EventHandle类型,输入框获得焦点时触发,event.detail = {value: value} bindblur...input还支持几种输入类型,如数字、身份证、表情等,这些输入类型,并不是指不能输入其他的字符,而是指软键盘的乐行,例如,数字输入类型,弹出的是输入输入键盘(只包含10个数字键和其他几个字符的软键盘)。

    2.9K20

    JavaScript 数据类型

    ; // 报错,不能 单双引号搭配 # 字符串转义符 类似HTML里面的特殊字符字符串中也有特殊字符,我们称之为转义符。...,因为变量可以很方便地修改里面的值 变量是不能添加引号的,因为加引号的变量会变成字符串 如果变量两侧都有字符串拼接,口诀“引引加加”,删掉数字,变量写加中间 <!...(prompt),用户输入年龄(用户输入) //把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接(程序内部处理) //使用alert语句弹出警示框...(prompt),用户输入出生年份(用户输入) // 把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄(程序内部) //弹出警示框(alert...,继续弹出第二个输入框输入第二个值,最后通过弹出窗口显示出两次输入值相加的结果。

    84640

    正则表达式常见用例 原

    ; 例2、 (1)验证输入框的数值,只能输入1-10的数字(验证输入框的值是不是/^([1-9]|10)$/) function test(){        var text = document.getElementById...            alert("ok")            }else{            alert("no")              }        } (2)验证输入框的值是否全为数字...1-9]$/g             alert("ok")         } else {             alert("no")         }     } (3)替换输入框中的数字为空...匹配方括号的中任意字符,包括转义序列。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义,不过转义也是起作用的。...它匹配任何没有包含在方括号中的字符。你可以使用破折号            (-)来指定一个字符范围。任何普通字符在这里都是起作用的。

    63220

    html标签详解

    注意: 关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。 p标签不能包含块级标签。.../dt> 内容1 内容2 表格 表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号...input系列 type属性值 表现形式 对应代码 text 单行输入文本 password 密码输入框 ...password:密码输入框 radio:单选框 checkbox:多选框 submit:提交按钮 button:可点击的按钮,没有任何行为,一般配合JS使用 hidden:对用户不可见,通常用于修改某条数据时...:禁用模式(输入框显示灰色),所有input均适用 当type=text的时候,可以设置输入框的默认值,以及提示语: 如果需要给默认值可以用value=‘默认值’来设置,如果需要提示则用placeholder

    2.6K110

    【JavaEE初阶】JavaScript(WebAPI)

    , 标签中的内容都可以通过JS对象感知到, JS对象修改对应的属性能够影响到标签的展示, 通过这样的DOM API就可以JS代码来操作页面元素. 2.2常用的DOMAPI 2.2.1.选中页面元素 在...API能够操作的全部属性, 比如img元素. 4.获取/修改表单元素属性 这里把表单元素单拎出来是因为, 表单元素中有一些特别的属性是普通标签没有的, 主要需要区别的是一些表单元素想要获取其中用户输入的内容的话是不能通过...,比较用户输入数字和生成的随机数大小 let input = document.querySelector('input');//标签选择器 let resultDiv...if(input.value == ''){ //输入框没有值,用户未输入,直接返回 return;...//点击时,获取到三个输入框的文本内容 //创建一个新的div.rom把内容构造到这个div中即可.

    24320

    表单常用的控件有哪些_html表单控件样式修改

    表单特性   value属性规定输入字段的初始值;   readonly属性规定输入字段为只读(不能修改); readonly属性不需要值,它等同于readonly=“readonly”。   ...没有属性值   size属性规定输入字段的尺寸(以字符计);   maxlength属性规定输入字段允许的最大长度;该属性不会提供任何反馈。...H5新增表单特性 placeholder   输入框提示信息   autocomplete 是否保存用户输入值(默认为on,关闭提示选择off)   autofocus    指定表单获取输入焦点...提交按钮会把表单数据发送到服务器 text 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。...number 只能包含数字输入框 color 颜色选择器 datatime 显示完整日期 在opera浏览器下作用 datetime-local 显示完整日期 不含时区

    3.9K20

    Validate表单验证

    在validate中的rules中编写验证规则(格式如下) 字段的name属性:“校验器”(tisps:一个输入框只有一个校验器的时候使用) 字段的name属性:{校验器:值,校验器:值}(tips...:输入框需要有多个校验器的时候使用) 在validate中的messages中编写提示信息(tips格式与rules相对应) 在validate中的submitHandler中编写验证通过执行的内容 图示如下...3 remote url路径 使用ajax进行验证 4 date 数字 正确格式日期 tips:ie6有bug 5 dateISO 字符串 正确格式的日期 例如:2018-11-28,2018/11/...11 maxlength 数字 最大长度 12 minlength 数字 最小长度 13 rangelength [min,max] 输入长度必须在 min和 max之间的字符串(tips:汉字算一个字符...) 14 range [min,max] 输入值必须在 min和 max之间的数字 15 max :n 最大值不能大于n 16 min :n 最小值不能小于n

    3.7K50

    如何从 0 到 1 实现一个支持排序、查找、分页的表格组件(React版)

    本案例将使用 React 进行介绍(更多讲解其实现的原理和步骤,你可以用其他框架进行实现),具体列表如下图所示,有姓名、年龄、是否经理人、入职日期这几列,我们可以在各列表头下面的输入框进行模糊搜索内容,...开始之前,我们在来总结下项目的需求: 支持列表的分页 支持字符串、布尔值、数字及日期的升序和倒序排列 支持字符串、布尔值、数字和日期的数据查询 本案例不会借助其他的第三方组库(除了基础的React),我们从...我们需要创建一个搜索对象,用来分别存储搜索的键(列名)和对应值(输入框的值),由于支持多属性键值,可以支持多个列的复合查找。...如果用户在输入框输入了任何内容,我们需要将其添加到我们定义的搜索对象里,如果用户将输入项删除,我们还需要将其搜索对象的属性Key值进行删除,具体的输入框的查找事件定义如下: const handleSearch...接下来你可以这样继续改进它: 将查找布尔类型的输入框更改为下拉框 将查找日期类型的输入框更改日期选择类型的输入框 实现年龄、日期的按范围搜索 尝试找到本案例存在的未知BUG 尝试用 Vue 框架改写本案例

    2.5K20

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    另外一种情况(一般在页面内容很少时 iphone5及以上常发生),当输入框弹出时 fixed元素挤到输入框上,当输入框消失时, fixed元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在...减去键盘的 高度,需要手动去触发视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常 13.禁止用户选中文字...解决:利用 js获取文字 line-height再去设置 div高度  18.使用 background时, background-position里使用了比如 center left后不能再加具体的数值去定位...,系统不会自动监控你选择文字的事件,比如打了多个拼音,可能选择的实际文字比输入字符数多或者少,但无法在用户确定自己的输入时监控到 keyup(其他事件也一样)判断字符数。...4.微信 jssdk里预览图片接口,图片的 url不能填 base64编码, ios上会很卡,估摸着微信得卡个 5秒左右才打得开,而 android上压跟就卡住或者一直卡在读取图片界面 5.微信当在输入框输入消息时

    3.7K40

    从编程小白到全栈开发:一个简易纯前端计算器

    编程是一个既要充分发挥创造力和想象力,又要忍受重复枯燥性的一项活动,所以我也在时刻思考着如何以通俗有趣的方式来讲解这些内容,你有足够的兴趣学习下去。...VS Code小技巧 接下来我们来做第二步:为了能让用户输入两个数字,我们决定在页面上放两个输入框输入框在HTML中是,来看下加上输入框后区域的代码: ...var num1El = document.getElementById('num1'); // 从num1输入框获取文字内容并转换成数字类型...('num2'); // 从num2输入框获取文字内容并转换成数字类型 var num2 = parseFloat(num2El.value);...因为HTML的输入框中获取的value,总是字符串类型的,而字符串类型的内容,直接进行数学运算会有问题。

    1.2K30
    领券