移动Safari浏览器:input字段上的JavaScript焦点()方法只适用于点击?

我似乎无法find解决这个问题的方法。

我有这样一个简单的input字段。

<div class="search"> <input type="text" value="yu no work"/> </div>​ 

我试图把它focus()在一个函数内。 所以里面的一个随机函数(无所谓是什么函数)我有这个线…

 $('.search').find('input').focus(); 

这在任何桌面上都能正常工作。

但是,它不适用于我的iPhone。 该领域没有得到专注,键盘没有显示在我的iPhone上。

为了testing目的,并向你们展示问题,我做了一个快速示例:

 $('#some-test-element').click(function() { $('.search').find('input').focus(); // works well on my iPhone - Keyboard slides in }); setTimeout(function() { //alert('test'); //works $('.search').find('input').focus(); // doesn't work on my iPhone - works on Desktop }, 5000);​ 

任何想法为什么focus()将无法与我的iPhone超时function。

要查看实例,请在iPhone上testing这个小提琴。 http://jsfiddle.net/Hc4sT/

更新:

我创build了与我目前在当前项目中所面对的完全相同的案例。

我有一个select框应该 – 当“更改” – 将焦点设置到input字段,并滑动iphone或其他移动设备上的kexboard。 我发现焦点()设置正确,但键盘不显示。 我需要显示键盘。

我在这里上传了testing文件http://cl.ly/1d210x1W3Y3W …如果你在iphone上testing,你可以看到键盘没有滑入。

7 Solutions collect form web for “移动Safari浏览器:input字段上的JavaScript焦点()方法只适用于点击?”

其实,伙计们,有一个办法。 我苦苦争取http://forstartersapp.com (在iPhone或iPad上试用)。

基本上,触摸屏设备上的Safari对focus()文本框是吝啬的。 即使一些桌面浏览器做了click().focus() 。 但是触屏设备上的Safaridevise师们在键盘不断出现的时候就意识到了用户的烦恼,所以他们只把焦点放在以下几个条件上:

1)用户点击某处,执行click事件时调用focus() 。 如果您正在进行AJAX调用,那么您必须同步执行此操作,例如jQuery中的弃用(但仍然可用) $.ajax({async:false})选项。

2)此外 – 这一个让我忙了一会儿 – focus()仍然似乎没有工作,如果其他文本框在当时的重点。 我有一个“去”button,做了AJAX,所以我试图在Gobutton的touchstart事件上模糊文本框,但这只是使键盘消失,移动视口之前,我有机会完成点击Gobutton。 最后,我试着在Gobutton的touchend事件上模糊了文本框,这就像一个魅力!

当你把#1和#2放在一起,你会得到一个神奇的结果,将您的login表单从所有蹩脚的Weblogin表单,通过把焦点放在你的密码字段,让他们感觉更本土。 请享用! 🙂

我有一个图标的search表单,单击时清除文本。 但是,问题(在手机和平​​板电脑上)是键盘会崩溃/隐藏,因为click事件删除focus被从input中删除。

文本搜索输入与关闭图标

目标 :清除search表单(点击/点击x图标)后, 保持键盘可见

要做到这一点,请在事件上应用stopPropagation() ,如下所示:

 function clear ($event) { $event.preventDefault(); $event.stopPropagation(); self.query = ''; $timeout(function () { document.getElementById('sidebar-search').focus(); }, 1); } 

和HTML表单:

 <form ng-controller="SearchController as search" ng-submit="search.submit($event)"> <input type="search" id="sidebar-search" ng-model="search.query"> <span class="glyphicon glyphicon-remove-circle" ng-click="search.clear($event)"> </span> </form> 

UPDATE

我也试过这个,但无济于事:

 $(document).ready(function() { $('body :not(.wr-dropdown)').bind("click", function(e) { $('.test').focus(); }) $('.wr-dropdown').on('change', function(e) { if ($(".wr-dropdow option[value='/search']")) { setTimeout(function(e) { $('body :not(.wr-dropdown)').trigger("click"); },3000) } }); 

});

我很困惑,为什么你说这是行不通的,因为你的JSFiddle工作正常,但这里是我的build议呢?

在您的Click事件的SetTimeOut函数中尝试下面这行代码:

 document.myInput.focus(); 

myInput与input标签的名称属性相关。

 <input name="myInput"> 

并使用此代码来模糊该字段:

 document.activeElement.blur(); 

我设法使它与以下代码一起工作:

 event.preventDefault(); timeout(function () { $inputToFocus.focus(); }, 500); 

我正在使用AngularJS,所以我创build了一个解决我的问题的指令:

指示:

 angular.module('directivesModule').directive('focusOnClear', [ '$timeout', function (timeout) { return { restrict: 'A', link: function (scope, element, attrs) { var id = attrs.focusOnClear; var $inputSearchElement = $(element).parent().find('#' + id); element.on('click', function (event) { event.preventDefault(); timeout(function () { $inputSearchElement.focus(); }, 500); }); } }; } ]); 

如何使用指令:

 <div> <input type="search" id="search"> <i class="icon-clear" ng-click="clearSearchTerm()" focus-on-clear="search"></i> </div> 

看起来你正在使用jQuery,所以我不知道这个指令是否有帮助。

这个解决scheme效果很好,我在我的手机上testing过:

 document.body.ontouchend = function() { document.querySelector('[name="name"]').focus(); }; 

请享用

我最近面临同样的问题。 我发现一个解决scheme,显然适用于所有设备。 您不能以编程方式进行asynchronous聚焦,但是当某个其他input已经聚焦时,您可以焦点切换到目标input。 所以你需要做的是创build,隐藏,追加到DOM上,并在触发事件上集中一个input,当asynchronous操作完成时,只需在目标input上再次调用焦点。 这是一个示例代码片段 – 在您的手机上运行它。

编辑:

这是一个相同的代码小提琴 。 显然你不能在手机上运行附加的代码片断(或者我做错了什么)。

 var $triggerCheckbox = $("#trigger-checkbox"); var $targetInput = $("#target-input"); // Create fake & invisible input var $fakeInput = $("<input type='text' />") .css({ position: "absolute", width: $targetInput.outerWidth(), // zoom properly (iOS) height: 0, // hide cursor (font-size: 0 will zoom to quarks level) (iOS) opacity: 0, // make input transparent :] }); var delay = 2000; // That's crazy long, but good as an example $triggerCheckbox.on("change", function(event) { // Disable input when unchecking trigger checkbox (presentational purpose) if (!event.target.checked) { return $targetInput .attr("disabled", true) .attr("placeholder", "I'm disabled"); } // Prepend to target input container and focus fake input $fakeInput.prependTo("#container").focus(); // Update placeholder (presentational purpose) $targetInput.attr("placeholder", "Wait for it..."); // setTimeout, fetch or any async action will work setTimeout(function() { // Shift focus to target input $targetInput .attr("disabled", false) .attr("placeholder", "I'm alive!") .focus(); // Remove fake input - no need to keep it in DOM $fakeInput.remove(); }, delay); }); 
 label { display: block; margin-top: 20px; } input { box-sizing: border-box; font-size: inherit; } #container { position: relative; } #target-input { width: 250px; padding: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="container"> <input type="text" id="target-input" placeholder="I'm disabled" /> <label> <input type="checkbox" id="trigger-checkbox" /> focus with setTimetout </label> </div> 

请尝试使用on-tap而不是ng-click事件。 我有这个问题。 我通过在search表单标签内部清除search框button来解决这个问题,并通过点击取代了ng-click清除button。 现在工作正常。

  • 跨浏览器多行文本溢出与省略号附加宽度和高度固定div?
  • 获取jQuery中的checkbox值
  • 在jQuery中删除事件处理程序的最佳方法?
  • 如何使用jQuery指定contentType的jsonp POST请求?
  • jQuery select2获取select标记的值?
  • 使用javascript下载PDF格式的HTML格式的PDF
  • CORS jQuery AJAX请求
  • $(window).load和$(document).ready之间有什么区别?
  • 移动Safari浏览器的bug在固定定位button后scrollTop编程更改...?
  • 为什么.join()不能使用函数参数?
  • 禁用使用jQuery的文本框?