手动触发专注于输入 Iphone 问题
Posted
技术标签:
【中文标题】手动触发专注于输入 Iphone 问题【英文标题】:manually trigger focus on input Iphone issue 【发布时间】:2018-08-03 15:02:31 【问题描述】:单击另一个元素后,我试图聚焦文本区域。桌面浏览器似乎工作正常,但 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();
);
这里有一点demo
它会将文本区域集中在复选框的更改事件上。这就是问题所在,如何使用演示中的动画解决这个问题?
【问题讨论】:
【参考方案1】:您必须使用touchstart
事件来解决此问题。
$(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>
【讨论】:
owesm 兄弟,你节省了一百个小时 :)以上是关于手动触发专注于输入 Iphone 问题的主要内容,如果未能解决你的问题,请参考以下文章