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

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

您无法直接打开大写锁定或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>