如何在iOS设备上以编程方式选择输入字段的文本,例如运行移动Safari的iPhone,iPad?
通常.select(),在<input ... />元素上调用函数就足够了,但这对这些设备不起作用.光标只是留在现有条目的末尾而没有做出选择.
我似乎找不到解决这个问题的方法.
我有一个像这样的简单输入字段.
<div class="search">
<input type="text" value="y u no work"/>
</div>?
Run Code Online (Sandbox Code Playgroud)
而我正试着focus()在一个函数内部.所以在随机函数内部(无论它是什么函数)我有这条线...
$('.search').find('input').focus();
Run Code Online (Sandbox Code Playgroud)
这对每个桌面都可以正常工作.
但它在我的iPhone上不起作用.该字段没有聚焦,键盘没有显示在我的iPhone上.
出于测试目的并向您展示问题,我做了一个快速示例:
$('#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);?
Run Code Online (Sandbox Code Playgroud)
知道为什么focus()我的iPhone上的超时功能不起作用.
要查看实时示例,请在iPhone上测试此小提琴.http://jsfiddle.net/Hc4sT/
更新:
我创建了与我当前在当前项目中面临的完全相同的情况.
我有一个选择框应该 - 当"改变"时 - 将焦点设置到输入字段并滑入iphone或其他移动设备上的kexboard.我发现focus()设置正确但键盘没有出现.我需要键盘出现.
我在这里上传了测试文件http://cl.ly/1d210x1W3Y3W ...如果你在iphone上测试它,你可以看到键盘没有滑入.
所以我已经看到很多关于iOS问题的线索,专注于输入/ textarea元素.(看这里和这里)似乎iOS不会让你手动专注于其中一个元素,并要求它是一个真正的点击/点击以专注于元素.
我已经尝试模拟点击,触发点击,只需点击()直接点击...各种各样的事情.
以下是我目前正在尝试实施的解决方法:
$scope.gotoElement = function(eID) {
// call $anchorScroll()
$scope.smoothScrollTo(eID).then(function() {
clickElement('#textarea');
});
}
function clickElement(e) {
$(e).on('touchstart', function() {
//$(e).val('touchstart');
$(e).focus();
});
$(e).trigger('touchstart');
}
Run Code Online (Sandbox Code Playgroud)
你不需要担心滚动功能,我知道这有效,我已经测试了足够的.注释掉的$(e).val('touchstart')工作没有问题来改变textarea的文本,但是.focus()在iOS上不起作用.我已经在Android设备上测试了它,它工作正常,但在iOS上它只是没有调出键盘.有时它会开始调高键盘半秒钟然后再次消失.
我已经看过上面提到的其他线程了,我似乎无法弄清楚如何为此编写解决方法.
有任何想法吗?
问题:基于iOS7 Safari中主屏幕Web应用程序的给定示例,如何实现永不滚动出视图的固定持久标头,以及在敲击时滚动到视图中的输入字段?
这两个示例有一个区别,一个height=device-height在视口中,另一个没有.
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
Run Code Online (Sandbox Code Playgroud)
演示:http://run.plnkr.co/plunks/SU8Csk/
编辑链接:http://plnkr.co/edit/SU8Csk

好处:固定标题在点击字段时不会改变位置/高度.
坏处:用户无法在不手动滚动或按下"下一步"按钮的情况下看不到聚焦的字段.这可能非常繁琐,尤其是如果字段位于不溢出的页面上.
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
Run Code Online (Sandbox Code Playgroud)
演示:http://run.plnkr.co/plunks/rPoyaB/
编辑链接:http://plnkr.co/edit/rPoyaB

好处:用户根据需要滚动到焦点字段.
坏处:固定标题完全滚出视图,这需要始终保持在屏幕上.场景是,它将包含一个取消按钮和一个始终可以访问的保存按钮.此外,当字段模糊时,标题本身看起来被压扁,直到用户将其向下滚动到视图中,但如果禁用溢出,则它们甚至无法执行此操作.
丑陋的:在我的非平凡的真实代码中,远离这些简化的例子,有一堆元素绝对位于标题内以创建曲线"标签"效果,这些元素的对齐完全关闭.
您应该能够在iOS7 Safari中打开每个演示URL,添加到主屏幕,然后启动以演示该问题.
解决这个问题的最佳方法是什么?
注意:我知道iOS7 Safari中存在"错误",特别是涉及到主屏幕Web应用程序时,但我相信可能存在与我如何构建页面相关的解决方法.我做了大量的研究(见下文),但我很难找到解决方案.
"固定标题"问题的相关链接: ios7 +中需要固定标题,如何获得固定标题以保持在页面顶部?, 修复了移动safari网站上的文本字段标题, iOS 5固定定位和虚拟键盘, ipad/iphone上固定页眉,页脚和侧栏的问题, CSS"位置:固定;" 在iPad/iPhone上?, 固定在Mobile Safari中的定位,当在Mobile Safari中打开虚拟键盘时, 如何阻止我的固定导航像这样移动?, web应用程序 - 设备高度/键盘问题 …
我正在尝试让特定的表单字段在iPhone上的Safari浏览器中自动获得焦点.我认为这将是非常简单的,但我不能让这个工作.那么,这实际上是不可能的还是我错过了一些非常明显的东西(我怀疑)?这是我正在使用的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function formfocus() {
document.getElementById('element').focus();
}
window.onload = formfocus;
</script>
</head>
<body>
<form>
<input/>
<input id="element" autofocus/>
<input/>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
您可以看到我试图获得焦点两次,一次通过js,一次通过输入字段上的HTML"aufofocus"属性.这个伎俩也没有.这适用于桌面浏览器,但是当我在iPhone 4上打开页面时,没有骰子,也就是说,我必须通过单击其中一个表单字段手动设置焦点.
最终我想要的是在移动浏览器上打开网站,并专注于表单字段,包括打开键盘以开始输入.
谢谢你的帮助!
注意:由于与工作相关的更改,我无法再验证此处发布的答案.最有可能的是,我永远无法接受下面的答案.这里发布的信息对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%" …Run Code Online (Sandbox Code Playgroud) 嘿,我想知道如何将焦点设置为Mobile Safari中的文本框.
我试过document.myForm.myTextArea.focus()在常规Safari中工作,但它似乎在Mobile Safari中不起作用.
为了澄清,我想在用户加载页面时立即将焦点设置到文本框,并弹出iPhone键盘.
我已经尝试过 autoFocus 或 focus(),但似乎不起作用。
<textarea autoFocus />
or
<textarea ref="textarea" />
componentDidMount() {
findDOMNode(this.refs.textarea).focus();
}
Run Code Online (Sandbox Code Playgroud)
autoFocus似乎可以在 Chrome 中使用。
两者autoFocus foucs()都不适用于 iOS。
我有一个问题,关注iPad上的文本字段.我在哪里使用:
$(document).bind("click",function(event) {
alert('click');
focusTextArea();
});
Run Code Online (Sandbox Code Playgroud)
焦点设置为文本区域,并出现键盘.但是,当使用touchend调用时,focusTextArea不会调用并且键盘不可见.我的focusTextArea功能是:
function focusTextArea() {
$('#textArea').focus();
}
Run Code Online (Sandbox Code Playgroud)
有谁知道为什么会发生这种情况,以及我怎么能够让它发挥作用?
TIA,
亚当
我正在开发一个html5应用程序,它将在自助服务终端模式的iPad上使用.用户必须做的第一件事是登录,所以当主页加载时,我希望屏幕键盘弹出焦点在第一个字段中.
我已经尝试了所有我能想到的变体,包括
谁有人想出如何使键盘自动出现?
首先,我知道只有iOS 5才能解决这个问题 - 我们正在为iOS 5用户提供一个功能,允许使用contenteditable进行Rich Text粘贴.到目前为止,此功能非常有用,我想要做的就是当视图显示将contenteditable字段设置为活动状态时(预先选择它),以便键盘出现并且用户可以立即开始键入.这是我用于UIWebView的本地html文件
<html>
<body>
<div id="content" contenteditable="true" style="font-family: Helvetica">PLACEHOLDER</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我已经尝试使用一些javascript来完成这个使用我发现的预选文本输入的教程.即使我试图切换到文本输入字段进行测试,我也无法使用它.这可能是由于我对javascipt缺乏经验所以如果这是解决方案请明确(因为我完全不熟悉javascript).
谢谢你的帮助
我已经工作了好几天来解决iOS的限制,它不允许自动关注Ipad上的文本字段.这里的问题很好地解释了移动Safari自动对焦文本字段.
我的目标是能够直接在屏幕上通过蓝牙扫描仪扫描条形码而无需用户交互.
我设法通过简单的方式设置AutoFocus,我已经在iOS v6上测试过了
$('#MyTextField').trigger('focus');
Run Code Online (Sandbox Code Playgroud)
document.activeElement返回我的文本字段,因为文本字段没有CURSOR.是正常的吗?
我认为因为光标没有显示在文本框上,键盘没有显示,并且因为没有显示键盘,所以当我使用扫描仪时,按键事件不会触发!