键盘的大写锁定键如何为文本框的第一个字母打开？

Question

我正在开发一个cordova 应用程序。对于输入文本，我想为第一个字母启用键盘的大写锁定键。以前我使用 text-form:capitalise 但如果用户想要首字母小写，则用户不能再次将首字母更改为小写（大写属性不会在键盘上启用大写锁定键）。

我只想在输入第一个字母时打开大写锁定键，如果用户禁用它，那么他可以将第一个字母输入为小写。

任何 css、html、jquery、javascript 解决方案的家伙？我的应用中有许多文本字段，我希望该解决方案适用于所有输入 type="text"。

我在下面输入的示例文本字段：

<input id="candidate_first_name" placeholder="Candidate First Name*" 
                                            type="text" class="ui-input-shadow-text">

Answer 1

您不能直接打开 capslock 或 shift 键。

您可以捕获按键事件，然后，如果该字段有一个字符，则将其设为大写。那么问题是避免弄乱用户的光标位置。在大多数现代浏览器上，您可以通过在更新字段后设置插入符号位置来做到这一点。如果用户不希望它被封顶，他们将不得不返回并进行编辑，这并不理想。

我不会在一般网页中执行此操作（如果有的话），有太多浏览器无法测试以避免让用户不满意的问题，但是如果您的场景更有限并且可以使用您的设备进行充分测试目标浏览器，可能是可行的。

这是一个适用于当前 Chrome、Firefox、IE 和 iOS Safari 的示例：

$("#testing").on("keypress", function(e) {
  // Only do it if the field is blank before the keypress
  // (the event occurs before the character is added to
  // the field)
  if (this.value.length === 0) {
    setTimeout(maybeCap.bind(this), 0);
  }
});

function maybeCap() {
  // Only do it if the field now has a single character
  if (this.value.length == 1) {
    this.value = this.value.toUpperCase();
    setCaretPosition(this, 1);
  }
}

function setCaretPosition(elem, caretPos) {
  if (elem) {
    if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.move('character', caretPos);
      range.select();
    } else {
      if (elem.selectionStart) {
        elem.focus();
        elem.setSelectionRange(caretPos, caretPos);
      } else
        elem.focus();
    }
  }
}

<input type="text" id="testing">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者作为一个 jQuery 插件：

$.fn.capFirst = function() {
  this.on("keypress", keypressHandler);
  
  function keypressHandler(e) {
    // Only do it if the field is blank before the keypress
    // (the event occurs before the character is added to
    // the field)
    if (this.value.length === 0) {
      setTimeout(maybeCap.bind(this), 0);
    }
  }
  
  function maybeCap() {
    // Only do it if the field now has a single character
    if (this.value.length == 1) {
      this.value = this.value.toUpperCase();
      setCaretPosition(this, 1);
    }
  }

  function setCaretPosition(elem, caretPos) {
    if (elem) {
      if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
      } else {
        if (elem.selectionStart) {
          elem.focus();
          elem.setSelectionRange(caretPos, caretPos);
        } else
          elem.focus();
      }
    }
  }
};

$("input[type=text]").capFirst();

<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>