手动触发焦点输入Iphone问题 [英] manually trigger focus on input Iphone issue

问题描述

我试图在点击另一个元素后聚焦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屋！