ручное управление триггером на вход Iphone issue

Question

Я пытаюсь сфокусировать текстовое поле после щелчка на другом элементе. настольные браузеры, похоже, работают нормально, но не 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

будет фокусировать на текстовое поле события изменения от флажка. Это проблема и как я могу решить эту проблему с помощью анимации, как в демо?

Answer 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>