再说一遍:我在这里学习! 很抱歉回答这些基本问题,但我必须学习......
使用我在网上读到的一个技巧,我试图将其从全部大写改为大写首字母。请参阅此处的代码 - 特别是我们正在查看 JavaScript onkeyup
:
这个有效:
<label for="class">Classification</label>
<input type="text" name="class" id="class" value="" required="true" placeholder="" style="text-transform:uppercase" onkeyup="javascript:this.value=this.value.toUpperCase();" />
这不起作用:
<label for="judge">Judge's Name</label>
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="javascript:this.value=this.charAt(0).toUpperCase() + this.substr(1);" />
最佳答案
您只是错过了检索 value
属性,您需要将 charAt
和 substr
应用于字符串而不是直接应用于 dom 元素。
<label for="judge">Judge's Name</label>
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="javascript:this.value=this.value.charAt(0).toUpperCase() + this.value.substr(1);" />
仅供引用: 始终最好使用 css,因为可以选择首字母大写(使用 text-transform:capitalize
)。此外,使用函数代替内联脚本代码,使其更具可读性和易于处理。
更新:
另一个建议是使用 Html5 input
事件而不是 keyup
这可能会好得多。
<label for="judge">Judge's Name</label>
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" oninput="javascript:this.value=this.value.charAt(0).toUpperCase() + this.value.substr(1);" />
您还可以通过添加一个名为 judge
的附加隐藏输入字段并更新该字段的值来避免移动箭头键的问题(如 @stdob 评论)将其传输到服务器。
function transform(ele) {
var hid = document.getElementById('judge');
hid.value =
ele.value.charAt(0).toUpperCase() + ele.value.substr(1);
}
<label for="judge">Judge's Name</label>
<input type="text" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="transform(this)" />
<input type="hidden" name="judge" id="judge" value="" />
关于JavaScript toUpperCase 只有第一个字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37887570/