当用户在文本区域中输入文本时,执行window.scrollTo()时,无意中发现了移动safari如何呈现光标的错误。附上说明问题的源代码。我想知道是否有人对我如何解决这个问题有什么建议。
问题是:如果用户在文本区域中输入文本并执行window.scrollTo(),则光标将保持在文本区域原来的位置,而不是当前位置。
重新创建:使用mobile safari加载以下网页。触摸文本区域,将打开键盘。键入几个字符并等待。当文本被动态添加到页面中,并且窗口滚动时,您将看到游标工件
尝试将焦点()设置回滚动后的文本区域,但似乎没有任何效果。
谢谢!
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css" media="screen">
textarea {
margin-top:50px;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
setTimeout(addContent,5000);
}, false);
function addContent() {
var elem = document.createElement('p');
elem.appendChild(document.createTextNode('Some new text'))
document.getElementById('newContentContainer').appendChild(elem);
window.scrollTo(0,20);
setTimeout(addContent,5000);
}
</script>
</head>
<body>
<div id="newContentContainer"></div>
<div>
<textarea></textarea>
</div>
</body>
</html>
这是一张显示问题的照片:
最佳答案
我很肯定这可以解决这个问题,而且很可能也会使屏幕上的键盘在一小段时间内闪烁。使用scrollTo()
后调用此代码:
yourTextArea.blur();
yourTextArea.focus();
关于javascript - 移动Safari scrollTo w/textarea错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2290992/