Autocapitalize = "слова", нарушенное на мобильном Safari в iOS 8,9 - Есть ли обходной путь?

Атрибут <input> autocapitalize="words" нарушен в мобильном Safari под iOS 8,9 со стандартной клавиатурой iOS. Он удерживает первые 2 буквы поля, а не первую букву каждого слова.

Поддерживается официальная документация: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html

Чтобы проверить, откройте следующее поле в эмуляторе 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>

Ответы

Ответ 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();
});