手动触发专注于输入 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 问题的主要内容,如果未能解决你的问题,请参考以下文章

专注于 iPhone 上的下一个有效键视图

如何专注于打开和模态的触发元素,一旦保存内容,整个页面就会被销毁并再次呈现

数据表专注于搜索,但不是 keyup

MKMapView 不专注于 CoreLocation

为啥专注于输入框和选项不适用于引导模式?

单击按钮后如何激活专注于输入的iOS键盘?