如何在浏览器中禁用文本区域字段的智能引号?

Question

我有一个在浏览器中运行的应用程序，用于比较字符串。字符串与引号比较使用 iOS11 失败，因为它默认为智能引号处于打开状态。can’t不等于can't

我知道可以在整个设备的设置下禁用智能引号，但我想在文本区域级别处理它。

我以为我能够在按键事件中捕捉到智能报价，但 iOS 稍后在幕后进行了切换。

textarea文本是我的文本区域中
的文本 字段 39 是单引号的字符代码 8216 是左边的字符代码 单智能引
号
222 是引号
键的键代码 键 e 是传递给键盘事件
的事件对象

keydown 
e.keycode -> 222, e.key -> ', key.charCodeAt(0) -> 39 
textareaText -> empty
keypress
e.keycode -> 39, e.key -> ', key.charCodeAt(0) -> 39 
textareaText -> empty
—> character is put in textarea here
keyup (iPad onscreen keyboard)
e.keycode -> 222, e.key -> ', key.charCodeAt(0) -> 39 
textareaText -> ’, textareaText.charCodeAt(0) -> 8216 
keyup (iPad external keyboard)
e.keycode -> 0, e.key -> ', key.charCodeAt(0) -> 39 
textareaText -> ’, textareaText.charCodeAt(0) -> 8216 

keyup 事件认为字符是常规引号，而文本区域包含智能引号。

我试过了：

textarea.innerHTML = textarea.innerHTML.replace(/’/,''')

但是光标被重置为字符串的开头，我不想获取和设置光标位置。

在智能报价输入文本区域之前，有没有办法交换它？ 或者某种在文本区域级别禁用智能引号的方法？这个问题还有其他解决方案吗？

我最后的手段是在比较字符串之前替换字符串中的智能引号，但我希望浏览器显示常规引号，以与他们输入的内容、看到的内容以及检查的内容保持一致。

Answer 1

最简单的方法是将spellcheck="false"传递给输入元素。这是基于WebKit的工作方式：https://github.com/WebKit/webkit/blob/master/Source/WebKit/UIProcess/ios/WKContentViewInteraction.mm#L4852

Answer 2

我最终在按键事件中使用了document.execCommand。此解决方案也适用于内容可编辑的div。

function checkInput(e) {
if ((e.which == 39) || (e.which == 8216) || (e.which == 8217)) {
e.preventDefault();
document.execCommand('insertText', 0, "'");
}
}   
var el = document.getElementById('txtIn');
el.addEventListener('keypress', checkInput, false);