如何在 UIWebView iOS5 中预选 contenteditable 字段答案

【问题标题】：How to preselect contenteditable field in UIWebView iOS5如何在 UIWebView iOS5 中预选 contenteditable 字段
【发布时间】：2011-12-21 12:16:13
【问题描述】：

首先，我知道 contenteditable 只是 iOS 5 我已经考虑到这一点 - 我们为 iOS 5 的用户提供了一项功能，允许使用 contenteditable 粘贴富文本。到目前为止，此功能非常有效，我要做的就是在视图出现时将 contenteditable 字段设置为活动状态（预先选择它），以便键盘出现并且用户可以立即开始输入。这是我用于 UIWebView 的本地 html 文件

<html>
    <body>
        <div id="content" contenteditable="true" style="font-family: Helvetica">PLACEHOLDER</div>
    </body>
</html>

我已经尝试使用一些 javascript 来完成此操作，使用我找到的用于预选文本输入的教程。即使我尝试切换到文本输入字段进行测试，我也无法让它工作。这可能是由于我对 javascipt 缺乏经验，所以如果这是解决方案，请明确说明（因为我完全不熟悉 javascript）。

感谢您的帮助

【问题讨论】：

标签： javascript uiwebview ios5 contenteditable

【解决方案1】：

现在如果有人想在 iOS 6 中实现这一点，他可以像这样以编程方式打开 iOS 键盘，

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    // keyboardDisplayRequiresUserAction available in iOS >= 6 
    if ([webView respondsToSelector:@selector(setKeyboardDisplayRequiresUserAction:)]) {
        webView.keyboardDisplayRequiresUserAction = NO;
    }
}

然后，

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // Assuming that you're using jquery. If not, use document.getElementById('YourInputElementID')
    NSString *evalStr = [NSString stringWithFormat:@"setTimeout( function(){$('#YourInputElementID').focus();},1000);"];
    [webView stringByEvaluatingJavaScriptFromString:evalStr];
}

这将在 1 秒后运行此 javascript。为了安全起见，您应该在加载聚焦元素时调用获取焦点代码。

【讨论】：

在 InterfaceBuilder 中设置 keyboardDisplayRequiresUserAction 对我不起作用，但在代码中添加它可以修复它。如果上面的代码对阅读的人不起作用，请确保该属性实际上是在运行时设置的。

【解决方案2】：

很遗憾，您无法在 Mobile Safari 中执行此操作。我相信 Apple 选择限制这种情况发生，因为当您访问某些网站（例如 Google）时，搜索字段会立即获得焦点。如果用户访问的每个站点都弹出键盘，这对用户来说将是非常烦人的。在桌面设备上这种行为无关紧要，但在移动设备上却非常明显。

相关：Mobile Safari Autofocus text field

【讨论】：

谢谢，这就是我的怀疑 - 但我想确定一下。

【解决方案3】：

如果您处于单击事件处理程序的上下文中，则可以召唤键盘。

例如

document.body.addEventListener('click', function() {
  content.focus();
}, false);

应该工作

【讨论】：

这行得通！实际行为比这稍微宽松一些（还有其他场合/事件可以让您专注于 contentEditable），但它是如此离奇和不可预测，不值得记录。

【解决方案4】：

我没有关于 iOS 上 contenteditable 的信息，但我认为您应该能够简单地创建一个范围并将其添加到选择中。

var input; // your contenteditable element
var range = document.createRange();
range.selectNodeContents(input);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

【讨论】：

这适用于现代桌面浏览器。但从 iOS 5 开始不支持移动 safari。