iOS 8,9のモバイルSafariでautocapitalize = "words"が壊れています - 回避策はありますか？

<input>属性autocapitalize="words"は、デフォルトのiOSキーボードを搭載したiOS 8,9のモバイルSafariで壊れています。それは、各単語の最初の文字ではなく、フィールドの最初の2文字を大文字にします。 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html iOS 8,9のモバイルSafariでautocapitalize = "words"が壊れています - 回避策はありますか？

を、テストのiOSエミュレータまたは実際のデバイス上で、次のフィールドを開くには：

公式ドキュメントはサポートされていると言う

First name: <input type="text" autocorrect="off" autocapitalize="words" value="First Name">

あなたがテストにhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submitを使用し、またはiOS 8のこのスニペットことができますか9：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Test autocapitalize</title> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <label for="words">autocapitalize="words"</label> 
 
     <input type="text" autocapitalize="words" name="text1" id="words" /><br /> 
 
     <label for="sentences">autocapitalize="sentences"</label> 
 
     <input type="text" autocapitalize="sentences" name="text2" id="sentences" /><br /> 
 
     <label for="none">autocapitalize="none"</label> 
 
     <input type="text" autocapitalize="none" name="text3" id="none" /> 
 
    </form> 
 
    </body> 
 
</html>

これは8.x以降に存在し、レーダーの下を通過していることに驚いています。

既知の回避策はありますか？

更新10/13： iPhone 6s + Safariは、入力フィールドに設定されたHTML属性を完全に無視します。

出典

2015-09-18 juanca

Appleにこれを報告しましたか？ – Ken

また、私はw3の問題を参照していません...あなたが参照している - これは代わりに使用しているJavaScriptに問題がありますか？ – Ken

はい私はここに質問を掲載しました：https://forums.developer.apple.com/message/57845#57845 それが最高の場所か他の場所にあるかどうかは不明です。私が提供したw3リンクを明確にするには、HTMLマークアップをと置き換える必要があります。 '名：' あなたは問題を見ることができるはずです – juanca

（一時的に）このライブラリを含める場合は、https://github.com/agrublev/autocapitalizeにこの問題の回避策があるようです。しかし、jQueryが必要なので、モバイルデバイスでは理想的ではないかもしれません。私はこの小さなコードを作成しました。これは同じことをのために、のためだけにjQueryを使用しないで作成しました。他の場合も含むことができるのは間違いない。

以下の例では、「keyup」イベントではなく、ページの準備が整った単語を大文字にしています。私はいくつかのデバイスでコードをテストしたが、エラーは発生していない。しかし、何かがうまくいかない場合や、何かがよりうまくいくと感じた場合は、お気軽にコメントしてください。

私が追加した 'domReady'関数はIE9以上で動作することに注意してください。古いバージョンのサポートが必要な場合はthisをご覧ください。

// Create one global variable 
var lib = {}; 

(function (lib) { 

    lib.autocapitalize_element = function (element) { 
    var val = element.value.toLowerCase(); 
    var split_identifier = " "; 
    var split = val.split(split_identifier); 
    for (var i = 0; i < split.length; i ++) { 
     var v = split[i]; 
     if (v.length) { 
      split[i] = v.charAt(0).toUpperCase() + v.substring(1); 
     } 
    }; 
    val = split.join(split_identifier); 
    element.value = val; 
    } 

    lib.autocapitalize_helper = function(element) { 
    element.onkeyup = function(e) { 
     var inp = String.fromCharCode(e.keyCode); 
     if (/[a-zA-Z0-9-_ ]/.test(inp)) { 
     lib.autocapitalize_element(element); 
     } 
    }; 
    } 

    lib.autocapitalize = function() { 
    var elements = document.querySelectorAll("input[autocapitalize], textarea[autocapitalize]"); 
    for(var i = 0; i < elements.length; i++) { 
     lib.autocapitalize_helper(elements[i]); 
     lib.autocapitalize_element(elements[i]); 
    } 
    } 

    lib.domReady = function(callback) { 
    document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback); 
    }; 
}(lib)); 


// This function gets called when the dom is ready. I've added it to the lib variable now because I dislike adding global variables, but you can put it anywhere you like. 
lib.domReady(function() { 
    lib.autocapitalize(); 
});

出典

2017-07-12 15:09:44

あなたはjQueryなしで好きですか？それから、今夜私が拾うことができるものを見てみましょう;） –

iOS 8,9のモバイルSafariでautocapitalize = "words"が壊れています - 回避策はありますか？

答えて

関連する問題