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

mac2025-02-09  9

最近项目中的移动端使用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(); });
最新回复(0)