最近项目中的移动端使用iframe作为字容器,在处理input遇到一下一些问题。
解决方法:当focus将输入框呈现在可视位置。
$("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); },200); })解决方法:focus时input失焦
$("iframe").contents().on("focus",".timeInput, .time-input, .date-input, .timeInput",function(){ document.activeElement.blur(); })解决方法: 第一步:点击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(); });