22

この<input>属性autocapitalize="words"は、デフォルトの iOS キーボードを使用する iOS 8、9 のモバイル Safari では壊れています。各単語の最初の文字ではなく、フィールドの最初の 2 文字を大文字にします。

公式ドキュメントはサポートされていると述べています: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html

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

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

https://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 属性を完全に無視します。

4

1 に答える 1

1

このライブラリを (一時的に) 含める意思がある場合、この問題の回避策があるようです: https://github.com/agrublev/autocapitalize。ただし、jQuery が必要なため、モバイル デバイスには適していない可能性があります。jQuery を使用せずに単語に対してのみ同じことを行う、この小さなコードを作成しました。もちろん、他のケースを含むように拡張することもできます。

以下の例では、'keyup' イベントだけでなく、最初にページの準備ができている単語も大文字にしています。複数のデバイスでコードをテストしましたが、エラーは発生しませんでした。ただし、何かがうまくいかない場合や、何かを改善できると感じた場合は、遠慮なくコメントしてください。

私が追加した「domReady」関数は、IE9 以降で動作することに注意してください。古いバージョンのサポートが必要な場合は、こちらを参照してください。

// 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-12T15:09:44.107 に答える