脚本宝典收集整理的这篇文章主要介绍了

input限制输入小数点后两位(vue版本)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h3 id="articleHeader0">抛砖引玉——上代码</h3> <h5>首先想到在input事件中正则匹配一下,但是,在输入错误格式或非数字的情况下,会将整个输入框清空,体验很不好:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <input placeholder=&quot;限制小数点后两位&quot; type=&quot;text&quot; v-model=&quot;count&quot; @input=&quot;scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=''&quot;><br /> </template><br /> <script> data() { return { count: 0 } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"限制小数点后两位"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"count"</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">"scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=''"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data() { <span class="hljs-keyword">return</span> { count: <span class="hljs-number">0</span> } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h5>然后我就加了一个字段,在keyup事件中赋值,然后匹配:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <input placeholder=&quot;限制小数点后两位&quot; type=&quot;text&quot; v-model=&quot;count&quot; @keydown=&quot;checkKeydown($event, count)&quot; @input=&quot;scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=checkValue&quot;><br /> </template><br /> <script> data() { return { count: '', checkValue: '' } }, methods: { checkKeydown(e, value){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.checkValue = value; } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"限制小数点后两位"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"count"</span> @<span class="hljs-attr">keydown</span>=<span class="hljs-string">"checkKeydown($event, count)"</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">"scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=checkValue"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data() { <span class="hljs-keyword">return</span> { count: <span class="hljs-string">''</span>, checkValue: <span class="hljs-string">''</span> } }, methods: { checkKeydown(e, value){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.checkValue = value; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h5>这样已经可以实现需求了,不过体验上还是有一点怪,在输入不匹配时光标会闪动,最佳的体验应该是在keyup中将不匹配的按键直接return,不过这样需要额外判断一下backspace、de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e、——&gt;、&lt;——等,不知各位大佬是怎么实现的,欢迎评论!!</h5> <blockquote><p>附:关于input的都可以交流呀</p></blockquote>

总结

以上是脚本宝典为你收集整理的

input限制输入小数点后两位(vue版本)

全部内容,希望文章能够帮你解决

input限制输入小数点后两位(vue版本)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过