Question

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

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

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

对于个人用户而言，在他们自己的手机设置中禁用此功能非常容易。但是我们希望这样做，以便所有用户始终禁用此字段。我们已经做了以下所有事情，似乎并没有阻止它出现：

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

有什么建议吗？

Answer 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”似乎没有这些浏览器中的任何效果。

Answer 2

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

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

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

Answer 4

我无法测试这个，因为我没有三星手机，但你尝试过名字=“密码”技巧吗？

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

Answer 5

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

所以，基于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

三星预测文字服务不会遵守HTML5属性。

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

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

Answer 7

对于数字输入，请键入=“tel”解决问题

Answer 8

在vuejs中，我具有计算属性

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

在我拥有的data（）中

this.inputTypeState = false

我有模板

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

并且它起作用了，只是您没有三星自动完成功能，如果您想要Web和三星自动完成功能，则可以尝试使用临时输入=文本，然后将值转移到上面定义的其他输入中，然后第一个输入将负责构建自动完成功能第二-网站自动完成功能。

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

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

8 个答案: