处理移动端iframe中input框的一些总结

最近项目中的移动端使用iframe作为字容器，在处理input遇到一下一些问题。

1、点击input时，input不会自动显示在键盘上方。

解决方法：当focus将输入框呈现在可视位置。

$("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); },200); })

2、点击input不想弹出键盘

2.1、在处理一些input时比如日期组件，往往不希望键盘弹出。

解决方法：focus时input失焦

$("iframe").contents().on("focus",".timeInput, .time-input, .date-input, .timeInput",function(){ document.activeElement.blur(); })

2.2、在自带扫码枪(PDA)的设备上点击输入框不显示键盘

解决方法： 第一步：点击input时先失焦，然后focus。 第二步：当focus时先设置readonly去掉readonly，为了防止键盘弹出过快，使用setTimeout延迟remove readonly。

兼容性：ios的safari浏览器不支持，暂时只有安卓的浏览器支持。

//点击扫描框时不弹出键盘 iframeContent.on("focus",".codeScan", function(e){ var that = $(this); $(this).attr('readonly','readonly').css('background',"#fff"); $(this).attr("autocomplete","off");//去掉提示项 that.val(''); setTimeout(function(){that.removeAttr('readonly');},100) }); iframeContent.on("click",".codeScan", function() { $(this).blur(); $(this).focus(); });