键盘的大写字母锁定文本框的第一个字母的键？

Question

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

只需在输入第一个字母时想要大写锁定键，如果用户禁用它，则可以将第一个字母键入小写字母。

任何CSS，HTML，jQuery，JavaScript解决方案的家伙？我的应用程序中有许多文本字段，我希望解决方案适用于所有输入类型=“文本”。

样品文本字段我下面输入：

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

Answer 1

不能在CapsLock键或直接shift键开启。

您可以捕获keypress事件，并且，紧接着，如果该字段有一个字符，请将其设为大写。然后问题就是避免弄乱用户的光标位置。在大多数现代浏览器上，您可以通过在更新字段后设置插入位置来完成此操作。如果用户不希望它被封顶，他们将不得不返回并编辑，这并不理想。

我不会在一般网页（如果有的话）中执行此操作，有太多的浏览器需要测试以避免使用户不快乐的问题，但是如果您有更有限的场景并且可以充分测试你的目标浏览器，这可能是可行的。

下面是对目前的Chrome，火狐，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>