web-dev-qa-db-ja.com

Samsungの予測テキストをHTML形式で防止する

テキスト入力フィールドのあるHTMLフォームがあります。ユーザーの入力に応じて、データベース内の値のリストに基づいて、予測テキストの候補を取得するAJAXリクエストを行います。

そのリストを表示し、ユーザーはそのうちの1つを選択できます。次に、残りのフォームを表示します。

Samsung Galaxy S4の内蔵ブラウザーまたはChromeまたはFirefox）で当社のWebページを表示している場合、デバイスの予測入力候補もユーザータイプとして表示されます。例：スクリーンショットを参照してください。 ：

enter image description here

個々のユーザーが自分の電話の設定でこれを無効にするのは簡単です。ただし、すべてのユーザーに対してこのフィールドで常に無効になるようにする必要があります。次のすべてを既に実行していますが、表示が妨げられることはないようです。

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

ここでも確認できます 。

助言がありますか？

javascripthtmlsamsung-mobilet9
28
duncan

私はさまざまなことを試しましたが、モバイルでは現在、これを適切な方法で行う機会がないようです。

Safari Developer Docsによると、サポート https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html ですが、これはより関連性があるようですiOSよりデスクトップサファリに。

さらに、スペルチェックはそれを行うことができましたが、現在 http://caniuse.com/#feat=spellcheck-attribute によると：

モバイルブラウザーでの部分的なサポートは、通常、OSのスペルチェックが組み込まれているためです。 spellcheck = "false"は、これらのブラウザでは効果がないようです。

8
Fer To

フィールドをパスワードとして設定すると、オートコンプリート、オートコレクト、および上記のすべての動作が無効になります。入力を入力した後、テキストに戻します。 oninputイベントは私にとって重要でした。

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

入力タイプをパスワードに設定すると、必要な動作が得られますが、その後、テキストを回復して表示する必要があります。次のテストページは間近に迫っていますが、まだ愛が必要です。ドットを非表示にすると、カーソルが消えます。幸運を。問題は明らかに属性を実装することを怠っているサムスンなので、これを無視することは許されると思います。

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

いくつかの調査を行いましたが、現在のWebkitブラウザーでは、-webkit-text-securityフィールドでinput[type="password"]プロパティを再定義することはできません。

したがって、user1585345の回答に基づいて、改善されたアプローチを実行しました。非常にハックですが、場合によってはそれで十分です。

これは、入力する場所での入力パスワードの作成と、最初の入力が変更されたときに変更される入力テキストの作成で構成されます。また、スタイルが原因でカーソルが表示されていることも確認できます。

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>
1
José Antonio Postigo

私はサムスンの電話を持っていないのでこれをテストすることはできませんが、name = "password"トリックを試しましたか？

Android Cordova-app のtextareaおよびinputfieldsのオートコンプリートをオフにする==

1
Vincent Chan

数値入力の場合、type = "tel"は問題を解決します

1
fedevegili

HTML5属性は、Samsungの予測テキストサービスでは尊重されません。

私はSamsung Developersフォーラムに報告し、公式の修正を要求します： http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078 ？boardName = SDK＆startId = zzzzz〜

この問題が発生している場合は、公式修正のためのプッシュに参加してください。

1
Believe2014