29

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

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

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

在此处输入图像描述

个人用户很容易在自己手机的设置中禁用此功能。但是,我们希望使它始终为所有用户禁用此字段。我们已经在做以下所有事情,这似乎并不能阻止它的出现:

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

你也可以在这里看到这个

有什么建议么?

4

8 回答 8

8

我尝试了不同的方法,似乎在移动设备上你目前没有机会以正确的方式做到这一点。

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

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

移动浏览器的部分支持是由于它们的操作系统通常具有内置的拼写检查,而不是使用波浪下划线来指示拼写错误的单词。spellcheck="false" 在这些浏览器中似乎没有任何效果。

于 2015-10-09T12:53:21.887 回答
8

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

 <input id="myinput" oninput="changeInputType(this)" type="password"/>
 <script>
     function changeInputType(input) {
       input.type = 'text';
    }
 </script>
于 2016-10-18T14:34:37.923 回答
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>
于 2015-10-14T15:33:11.513 回答
1

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

在 Android Cordova-app 中关闭 textarea 和 inputfields 的自动完成功能

于 2015-10-16T02:17:30.170 回答
1

我做了一些研究,在当前的 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>

于 2017-02-23T09:35:00.573 回答
1

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

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

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

于 2017-07-27T13:25:18.897 回答
1

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

于 2018-05-18T17:09:35.527 回答
0

在 vuejs 我有计算属性

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

在 data() 我有

this.inputTypeState = false

在模板中我有

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

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

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

于 2020-05-19T08:17:25.510 回答