div 模拟 input

关于输入框有俩个点的要求
 1.进入这个页面 自动获取焦点
 2.（涉及到扫描）只想获取焦点，但不弹出软键盘

第一点：实现简单 直接focus即可
     但是；也会存在问题：当页面进来了执行获取焦点，但是js代码还会有其他的回调啥的，会阻止了这个键盘的弹出。常用的解决方法。用延迟函数 处理获取焦点 

setTimeout

第二点：很费劲，到目前为止，没找到合适的方法。
查阅各种资料，总结以下知识

1.网上说的【e.preventDefault(),】及给【input加上readonly属性 】【 在click事件触发后触发blur事件 】【

$("#wpdm_dtl").focus(function () {
//     document.activeElement.blur();
// })

】之类的。。。。这些都让input 处于不可编辑状态 了 。

2.如果借助appcan打包，appcan有个方法，可以手动关闭软键盘。问题是 每次点击输入框，先弹出来软键盘，在接着关闭了软键盘！不友好

3.重点：网站上很多用div模拟input 

用到了H5的全局属性contenteditable，但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？

上代码：

<div class="input" contenteditable placeholder="请输入文字"></div>
.input{  
            width:200px;  
            height:24px;  
            line-height:24px;  
            font-size:14px;  
            padding:5px 8px;  
            border:1px solid #ddd;  
        }  
        .input:empty::before {  
            content: attr(placeholder);  
        }   

给div加个属性contentEditable="true"就可以做编辑

暴露的问题，contentEditable还是很陌生。反应出对对h5 具体的东西了解的不深

 

333

 

转载于:https://www.cnblogs.com/lovelgx/articles/7569765.html