JavaScript HTML5 页面点击 input 禁止弹出手机默认键盘的几种解决办法

在手机端开发的时候，户点击 input 的时候，会默认调出手机软键盘。

需求：文本框获取焦点时，需要禁止手机弹出自带的输入键盘；（可能并非单纯的禁用，比如可能是调用自己设置的控件，或者调用微信扫描接口等，反正就是禁用后，这里还需要显示文本）

方法一：使用 readonly，把 input 设置为只读属性，这样就可以禁止弹出默认键盘了；

readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

readonly需要与disable做区分；

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

readonly虽然可以禁止弹出键盘，但是有兼容性问题，比如还会弹出一条东西（上下箭头和完成的那部分），

方法二：用一个 p/div 等标签显示内容；然后放一个隐藏的 input；

如果你想着用disable，禁止当前的input，那么完全可以选择用一个p/div/span等标签，用户点击这个区域的时候，调用你的第三控件等事情，完成后，JS 赋值隐藏的input值和当前显示的文本；

这样用户的体验是：点击了某个区域（这个区域你可能做的和其它input标签差不多），进行操作后，操作的结果显示在页面上了；

方法三：使用 document.activeElement.blur();

这是让获得焦点的元素失去焦点；

你可以在<body>标签中加入了onload=”document.activeElement.blur();”

不过这种处理的话就太粗暴了；

我个人推荐下面这种用法

document.activeElement.blur();

// 例如
$form.on("focus","input[name=xxx]",function(){
    document.activeElement.blur();
});

本文转载自：阿西河，如侵权请联系我们删除。