Kea*_*ale 14 jquery mobile-safari ios
注意:由于与工作相关的更改,我无法再验证此处发布的答案.最有可能的是,我永远无法接受下面的答案.这里发布的信息对IMO很有用,所以我会保持原样.如果您认为自己知道答案,请随时回答,我们将让社区决定哪些是有用的.
背景
我正在为iPod Touch 开发一个独立的Web应用程序.我的一个要求是在页面加载时关注文本字段,以便用户可以连续地执行任务(例如,使用条形码阅读器).
问题
问题是它确实关注于有问题的文本字段,但键盘不会上升.这有解决方法吗？或者这是Apple的设计？
示例Html
我不确定如何将它放入代码片段,但这是我一直在尝试的地方:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png">
<title>TESTING</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// javascript goes here
</script>
</head>
<body>
<section id="content">
<div class="container" style="margin-top: 50px;" >
<p>Testing textfield focus</p>
<form method="POST">
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control first-responder" />
</div>
<div class="col-xs-12">
<button type="submit" class="btn" style="width: 100%" >OK</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
我在Safari上查看此内容,然后将其添加到主屏幕,以便它可以充当独立的Web应用程序.
尝试
我试图寻找解决方案,第一个(我丢失链接)建议尝试超时如下:
$(function () {
var firstResponder = $(".first-responder");
setTimeout(function() {
firstResponder.focus();
}, 1000);
})
我发现的另一个解决方案建议设置选择范围如下:
$(function () {
var firstResponder = $(".first-responder");
setTimeout(function() {
firstResponder[0].setSelectionRange(0, 9999);
}, 1000);
})
还有一个建议将它绑定到这样的点击:
$(function () {
var firstResponder = $(".first-responder");
firstResponder.on('click', function() {
firstResponder.focus();
});
firstResponder.focus().click();
})
我也试过触发像这样的触摸启动:
$(function () {
var firstResponder = $(".first-responder");
firstResponder.on('touchstart', function() {
firstResponder.focus();
});
firstResponder.trigger('touchstart');
})
我也尝试过这样一个简单的ajax调用(不介意成功/错误.我想做的就是在ajax调用之后关注):
function doAjax() {
var firstResponder = $(".first-responder");
$.ajax({
url: "#",
method: "POST",
dataType: "json",
success: function(result) {
firstResponder.focus();
},
error: function(request, error) {
firstResponder.focus();
}
});
}
我有点绝望,所以我也试着设置一些css:
user-select: text;
-webkit-user-select: text;
这些解决方案适用于iOS 9.1(除了css之外),但它们都在iOS 11.1.1上失败了.我尝试组合各种解决方案,设置超时等,但似乎没有工作.正如我所指出的,它确实是焦点,因为我可以看到文本字段的边框变成蓝色,表示它具有焦点.但是我也需要显示键盘.
此行为似乎是一个错误或可用性/安全 功能.如果这是设计(即安全功能),Apple是否有官方文档来讨论这个问题？
附录
如果您认为条形码阅读器可能存在问题,则情况并非如此.在我正在研究的项目中,条形码阅读器取代了原生键盘.理论上,即使没有条形码,只要我能够在页面加载时调出键盘,我应该能够满足我的要求.
连续任务是可能的,因为条形码阅读器可以Enter在其读取的条形码之后包括密钥,从而提交文本字段所在的表格.页面重新加载后,如果文本字段自动聚焦,则用户需要做的就是读取另一个条形码.页面再次提交,重新加载,自动聚焦,循环可以重复.
小智 5
经过一番艰苦的测试，我找到了一种在我女朋友的 iphone 7 和 ios 11 上运行的方法，现在我不知道它是否能满足你的需求，但它确实弹出了虚拟键盘！
这是测试html：
<input type='text' id='foo' onclick="this.focus();">
<button id="button">Click here</button>
这是 JavaScript：
function popKeyboard(input) {
input.focus();
input.setSelectionRange(0, 0);
}
$("#button").on("click", function() {
popKeyboard($("#foo"));
});
这就是小提琴。
哦，我可以使用以防万一！
现在，它的作用是，当我们单击按钮时，这将被评估为用户输入，因为只有用户提供输入（在 android 和 ios 中），键盘才能弹出，我们运行 popKeyboard 函数，该函数聚焦输入并设置SelectionRange 为 0,0 这意味着它将插入符号设置为 0 并且键盘应该弹出。
这是在 Android 和装有 IOS 11 的 Iphone 7 上进行测试的。
请注意，她确实警告我她的 ios 11 尚未完全更新，但如果有效，请告诉我！
如果您集中注意力，您需要确保浏览器已完全加载，而不仅仅是onDOMContentReady使用标准load事件来执行此操作，因为一旦加载完全完成（即渲染已完成），该事件就会触发
由于现代 Web Kit 浏览器（chrome、iOS11）的一些奇怪之处，由于某种原因添加了延迟，该load事件在浏览器实际完全加载之前触发。但是，我确保仍以该load事件作为起点。
(function($){
$(function(){
window.addEventListener("load", function(){
setTimeout(function(){ $(".first-responder").focus(); }, 150);
});
})
})(jQuery);
https://jsfiddle.net/barkermn01/xzua65jd/1/
| 归档时间： |
|
| 查看次数： |
3057 次 |
| 最近记录： |