美文网首页
移动端数字框整理

移动端数字框整理

作者: 风凌摆渡人 | 来源:发表于2019-10-28 18:55 被阅读0次

背景

移动端需要限制输入数字区分小数和整数,限制文字输入。

遇到的坑

输入法 问题 解决方案
IOS输入法 明明是数字框点击,但是ios原生输入法点击词频可以输入文字字母 通过js替换掉
IOS输入法 仅仅需要数字,输入法全部显示出来了 通过pattern输入法展示数字
搜狗输入法 存数字输入可以输入小数点 js解决
H5现实 能够解决所有问题但是交互差点 未开发

期待更优解决方案,请留言,谢谢!!

解决方案:

    <table>
      <tr>
        <td>数字框:</td>
        <td><input type="number" /></td>
      </tr>
      <tr>
        <td>整数框:</td>
        <td><input type="number"
                 pattern="[0-9]*" 
                 oninput="value=value.replace(/[^0-9]*/g,'')"/>
        </td>
      </tr>
      <tr>
        <td>小数框:</td>
        <td><input type="number"
                 oninput="value=value.replace(/[^0-9.]/g,'')" /></td>
      </tr>
      <tr>
        <td>手机号码:</td>
        <td><input type="tel" /></td>
      </tr>
    </table>

总结

js可以替换实现全部效果但是效果不佳,正确合理的使用H5属性配合来达到预期效果。

实现效果

问题
解决后
手机号码
搜狗输入法

相关文章

  • 移动端数字框整理

    背景 移动端需要限制输入数字区分小数和整数,限制文字输入。 遇到的坑 期待更优解决方案,请留言,谢谢!! 解决方案...

  • 杂项笔记

    移动端如何阻止下拉出现底白 移动端meta表情解决缓存 input框正则输入限制

  • 工作随手笔记

    移动端input placeholder垂直不居中。移动端输入框的placeholder文字仔细看并非完全垂直居中...

  • 关于HTML5中input的使用攻略

    1、手机号专用输入框 当我们需要在移动端输入手机号时,输入框需要满足1.输入类型只能是数字2.输入长度为11位3....

  • input 弹出数字键盘

    移动端点击input输入框弹出数字键盘

  • 移动端meta整理

    如果支持Google Chrome Frame:GCF,则使用GCF渲染;如果系统安装ie8或以上版本,则使用最高...

  • 移动端兼容整理

    Updating... IOS 端box-radius/overflow:hidden失效ios端设置box-ra...

  • Flutter之Dialog 对话框各种用法

    前言: 各位同学大家好 ,相信移动端(安卓, iOS )和前端的同学都有使用过dialog对话框 ,移动端(安卓 ...

  • 书签管理器4

    移动端问题 关于移动端适配,你必须要知道的 - 掘金 稍微整理了几个经常在...

  • jq与input框事件

    1、input框获取焦点事件 2、input框失去焦点事件 3、input框输入内容变化事件 移动端需要在inpu...

网友评论

      本文标题:移动端数字框整理

      本文链接:https://www.haomeiwen.com/subject/aaxevctx.html