手动触发焦点输入Iphone问题 [英] manually trigger focus on input Iphone issue
本文介绍了手动触发焦点输入Iphone问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在点击另一个元素后聚焦textarea。桌面浏览器似乎工作正常但不是Iphone。
I am trying to focus a textarea after a click on a another element. desktop browsers seems to be working fine but not the Iphone.
$('.reveal_below').on('change', function(e) {
e.preventDefault();
var item_id = $(this).attr('data-item-id');
if (this.checked) {
$('.hidden_below__' + item_id).css({
'margin-left': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-left': '15px',
opacity: '1'
},
250, function() {
console.log("-----------");
$("#x").focus();
})
} else {
$('.hidden_below__' + item_id).slideUp();
}
});
这里有点演示
它会将textarea集中在复选框的更改事件上。这就是问题,我怎么能用演示中的动画来解决这个问题?
it will focus a textarea on change event of the checkbox. That is the issue and how to can i solve this with the animation as in the demo?
推荐答案
你必须使用 touchstart
解决此问题的事件。
You have to use touchstart
event to fix this issue.
$(document).ready(function() {
$('button').on('click', function() {
$('#x').css({
'margin-top': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-top': '15px',
opacity: '1'
},
100
)
$('#x').trigger('touchstart'); //trigger touchstart
});
$('textarea').on('touchstart', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="x" style="width: 100%;height:6em;display: none" placeholder="Return notes..." cols="30" rows="10"></textarea>
<button type="button">focus textarea</button>
这篇关于手动触发焦点输入Iphone问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文