以 HTML 形式阻止三星预测文本

Question

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

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

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

个人用户可以很容易地在自己的设置中禁用此功能phone。但是，我们希望它始终对所有用户禁用此字段。我们已经在做以下所有事情，但似乎并不能阻止它出现：

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

You can also see this here.

有什么建议吗？

Answer 1

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

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

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

The partial support in mobile browsers results from their OS generally having built-in spell checking instead of using the wavy underline to indicate misspelled words. spellcheck="false" does not seem to have any effect in these browsers.

Answer 2

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

    <!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>

Answer 3

我无法测试这个，因为我没有三星 phone，但是你试过 name="password" 这个技巧了吗？

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

Answer 4

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

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

Answer 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>

Answer 6

Samsung 预测文本服务不会考虑 HTML5 属性。

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

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

Answer 7

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

Answer 8

在 vuejs 中我计算了属性

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

在数据（）中我有

this.inputTypeState = false

我有模板

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

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

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

以 HTML 形式阻止三星预测文本

Prevent Samsung predictive text in HTML form

html

javascript

samsung-mobile

t9