阻止 HTML 表单中的三星预测文本答案

【问题标题】：Prevent Samsung predictive text in HTML form阻止 HTML 表单中的三星预测文本
【发布时间】：2015-10-06 11:19:45
【问题描述】：

我有一个带有文本输入字段的 HTML 表单。当用户键入时，我们会根据数据库中的值列表执行 AJAX 请求以获取预测性文本建议。

我们显示该列表，用户可以选择其中之一；然后我们向他们展示表格的其余部分。

如果您在三星 Galaxy S4 上查看我们的网页，在其内置浏览器或 Chrome 或 Firefox 中，设备的预测输入建议也会在用户键入时显示。例如看截图：

个人用户可以很容易地在自己手机的设置中禁用此功能。但是，我们希望使它始终为所有用户禁用此字段。我们已经在执行以下所有操作，但似乎并不能阻止它的出现：

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

You can also see this here.

有什么建议吗？

【问题讨论】：

我认为只有密码字段才有可能，但不确定。
我认为是autocomplete="false" 不是off，不是吗？
它们应该是同义词，但the documentation 说是off
你不能禁用它。我在 iOS 上遇到了同样的问题。它曾经与autocomplete="off" autocorrect="off" 一起工作，但不再与新的 ios 和 android 版本一起工作。
请记住，用户可以安装不同的键盘，这些键盘也可能绕过或跟随任何东西。因此，即使您找到了解决方案，也无法确保它适用于所有情况。

标签： javascript html samsung-mobile t9

【解决方案1】：

我尝试了不同的方法，但在移动设备上您目前似乎没有机会以正确的方式执行此操作。

根据 Safari 开发人员文档，支持 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html，但似乎这与桌面 Safari 的关系比 iOS 更相关。

此外，拼写检查可以做到，但目前，根据http://caniuse.com/#feat=spellcheck-attribute：

移动浏览器的部分支持通常来自其操作系统具有内置的拼写检查，而不是使用波浪下划线指出拼写错误的单词。 spellcheck="false" 好像没有这些浏览器中的任何效果。

【讨论】：

我想我将不得不接受“无法完成”作为答案，谢谢！
@duncan 我知道这并不令人满意，但有时没有“真正的”技巧。我猜对于本机应用程序，这可能是“可能的”，例如在 Android 上，您可以创建自己的函数、WebView 的侦听器，但这显然不是一个“简单”的 HTML 标记

【解决方案2】：

将字段设置为密码会禁用自动完成、自动更正...以及所有上述行为。输入输入后，我将其更改回文本。 oninput 事件对我来说至关重要。

 <input id="myinput" oninput="changeInputType(this)" type="password"/>
 <script>
     function changeInputType(input) {
       input.type = 'text';
    }
 </script>

【讨论】：

这对我有用。我使用onfocus 事件而不是oninput 事件，看起来更干净。
你觉得contenteditable div有没有类似的方法？
不工作 samsung galaxy tab A android 6.0 版本设备。

【解决方案3】：

将输入类型设置为密码可以获得您想要的行为，但是您必须恢复并显示文本。下面的测试页面越来越接近，但仍然需要一些爱。隐藏点会使光标消失。祝你好运。问题显然是三星忽略了实现属性，所以你可以原谅忽略这一点，我觉得。

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            input[type="password"] {
                cursor : url(cursor.png),auto;
                color : rgba(0,0,0,0);
            }
        </style>

    </head>
    <body>
        <form>
            <input type="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="under" /><br />
            <div id="over" style="position:absolute; left:10px; top:10px"></div>
        </form>
        <script>
            function textChanged(event) {
                document.getElementById('over').innerHTML = document.getElementById('under').value;
            }       
            document.getElementById('under').addEventListener('keyup', textChanged);
        </script>
    </body>
    </html>

【讨论】：

我认为这不符合移动操作系统提供商（Apple、Google）的利益。此外，我已经测试了您的代码，但在 iOS9 Safari 上它无法正常工作，所以 ...

【解决方案4】：

因为我没有三星手机，所以无法对此进行测试，但是您尝试过 name="password" 技巧吗？

Turning off auto-complete for textarea and inputfields in Android Cordova-app

【讨论】：

好主意！我在三星上尝试过（这次是 S6，但我认为在 S4 和 S5 上应该是一样的），但不幸的是它不起作用。

【解决方案5】：

我做了一些研究，在当前的 webkit 浏览器中，不允许在 input[type="password"] 字段上重新定义 -webkit-text-security 属性。

所以，根据 user1585345 的回答，我做了一个改进的方法。这很 hacky，但在某些情况下就足够了。

它包括创建一个输入密码、您输入的位置以及一个输入文本，当第一个输入更改时，该文本后面会更改。您还可以看到由于样式而显示的光标。

var textInput = document.querySelector('.unpredictable-input input[type="text"]');
var passwordInput = document.querySelector('.unpredictable-input input[type="password"]');

passwordInput.addEventListener('input', function() {

    textInput.value = passwordInput.value;

    if(navigator.userAgent.match(/Android/)) {
        passwordInput.style.letterSpacing =
        (2.6 + passwordInput.value.length * 0.05) + 'px';
    }

}, false);

.unpredictable-input {
    position: relative;
    width: 150px;
}

.unpredictable-input input {
    position: absolute;
    width: 100%;
}

.unpredictable-input input[type="text"] {
    font-family: monospace;
}

.unpredictable-input input[type="password"] {
    color: black;
    user-select: none;
    -webkit-text-fill-color: transparent;
    background: transparent;
    letter-spacing: 2.5px;
    padding: 3px;
    border: 0;
}

<div class="unpredictable-input">
    <input type="text" />
    <input type="password" />
</div>

【讨论】：

【解决方案6】：

Samsung 预测文本服务不会尊重 HTML5 属性。

我已向三星开发者论坛报告并请求官方修复：http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName=SDK&startId=zzzzz~

如果您遇到此问题，请加入努力推动官方修复。

【讨论】：

【解决方案7】：

对于数字输入，type="tel" 解决了这个问题

【讨论】：

【解决方案8】：

在 vuejs 中我有计算属性

inputType(){
   if(this.inputTypeState){
      return 'text'
   }
   return 'password'
}

在 data() 我有

this.inputTypeState = false

在我有的模板中

<input
   :type="inputType"
   @input="inputTypeState = true"
>

它可以工作，只是你没有三星自动完成，如果你想要网络和三星自动完成，可以尝试随意输入=文本，然后将值转移到我上面定义的不同输入，然后第一个输入将负责构建自动完成第二个 - 用于网站自动完成。

booking.com 已经解决了他们使用什么方法很有趣

【讨论】：