征服number类型的input框

在移动端H5页面开发中，有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数，最简单的方式是使用number类型的input框，输入时软键盘会切换为数字键盘方便输入（ios是带数字的全键盘，并允许1e5这类的表示方法）。但是在实际使用的时候会面临一个问题，当输入的内容不合法时，比如输入了1...2，此时input会设置自己的状态为invalid，并把value清空。我们可以在css中通过input:invalid来为此input设置输入内容错误的样式，而在js一端，我们却无法知道用户输入的错误内容到底是什么。这个问题是dom本身的特性所置，与我们采用的开发框架无关，不管我们是使用angular、vue还是react，当number类型的input中输入不合法内容时，js就是没有办法知道错误内容是什么，也就没有办法帮助用户修正输入错误。

然而实际需求可不管这个，限制用户输入的数值范围、小数点后精度、是否允许负数等等都是很常见的需求。那怎么办呢？最近看到一篇文章做了一个很无可奈何，但确实很华丽的尝试：一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现。有兴趣可以看一下，这篇文章实现了一个假的键盘来处理这些逻辑。在很复杂的交互和视觉需求下，做一个假键盘也不失为一个终极的解决方案。不过在我看来，处理数字格式、纠错等问题倒可以不用这么麻烦，下面我就分享一下我的思路。

设置一个目标吧：

允许输入负数
最多输入5位数
最多允许两位小数
自动清除多余的前置0
自动补充纯小数的整数部分0

虽然定了这么多目标，归根到底只要能得到输入框的输入内容，剩下的就是简单的字符串处理了。那么如何能获取输入内容呢？我的方法是让浏览器选中输入框中所有的内容，然后获取浏览器中选中的字符串，最后清除选中状态。选中输入框中的内容有两种方法：

最简单的是直接调用input.select()（HTMLInputElement.select()）；
当输入框已经获得焦点的时候（当然），可以使用document.execCommand('SelectAll')来全选输入框中的所有内容(The selectAll command)。

然而实际上类型的为number的输入框是不允许操作selectRange的，虽然能选中内容，获取输入框中信息，但我在清除选中状态时遇到了问题（也许我代码写得不对），那么采用第二种方法。获取浏览器选中的字符串可以用Window.getSelection().toString()（Window.getSelection()）。得到实际输入的内容后，我们可以进行一系列的逻辑判断、数值更正。那么最后怎么再把正确的内容写回input框中，同时清除选中状态呢？方法也很多：

把正确的内容写进clipboard，再粘贴到选中区域，主要使用document.execCommand('copy')和document.execCommand('paste')（The copy command、The paste command）；
直接执行一次Undo操作，把输入框内容回退到上一次的正确结果（The undo command）；
执行insertText命令，在选中区域处插入新文本（The insertText command）。

到这里基本上所需要的准备工作都已经完成，试着实践一下：

<input type="number" id="input"/>

const input = document.querySelector('#input');const format = /-?\d{0,5}(\.\d{0,2})?/;
let lastValue;input.addEventListener('input', event => {document.execCommand('SelectAll');let text = window.getSelection().toString();if (lastValue !== text) {const match = text.match(format);if (!match) {text = '';}else {text = match[0].replace(/^(-?)0+(\d)/, '$1$2') // 删除多余的前置0.replace(/^(-?)\./, '$10.'); // 插入纯小数的整数0}lastValue = text;document.execCommand('insertText', false, text);}
});

征服number类型的input框相关推荐

自定义 cube-ui 弹出框dialog支持多个且多种类型的input框
start 最近遇到一个需求,给一个移动端项目加一点小功能. 移动端 UI 组件库使用的是 cube-ui. 但是基础的 cube-ui 不太满足我的需求- 重点是记录一下我的思路,其次才是实现的代码 ...
html文本框有个小箭头,去掉input(number类型)输入框箭头的方法教程
在web前端中,number类型的input输入框在获得鼠标焦点的情况下,会出现两个向上和向下的箭头.虽然箭头可用于input输入框中的数字增大和减小,但在某些特定的场景中反而会让用户产生错乱的感觉. ...
input改为number类型，去掉上下箭头
input框只能输入的是number类型的内容,所以我直接写成了 type="number" ,虽然实现了这个功能,但input框后面出现了上下箭头,看起来巨丑无比! 只要在css ...
解决：input框当type为number时maxlength失效
慕客网标明的用法是适用type为text和passswod的当我input框设置type为number的时候怎么限制输入长度呢?使用outinput就可以啦 <input type=" ...
html输入框为什么不能粘贴,移动端input框type为number仍可以输入和粘贴【中文】的问题...
先这个问题非常棘手,因为这可能是浏览器的一个bug,当用户在type=number的input框输入中文时,这个值其实并不会被接收,但是有时会被展现.即:它会像普通值一样显示,但是双向绑定的参数接收不 ...
移动端苹果手机的input框type= number只是唤起数字键盘不能阻止输入汉字和字母
移动端苹果手机的input框type= number只是唤起数字键盘不能阻止输入汉字和字母 , input事件的replace(正则,'')没有作用解决办法用input type = text ...
vue 保留三位小数_vue input框type=number 保留两位小数自定义组件
第一步:自定义组件MyNumberInput.vue export default { props: { point: { default: 0 }, max: Number, placeholder ...
js控制input框输入数字时，累计求和
input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...
js－移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

征服number类型的input框

征服number类型的input框相关推荐

最新文章

热门文章