JavaScript toUpperCase 只有第一个字母

Question

再说一遍:我在这里学习!很抱歉回答这些基本问题，但我必须学习......

使用我在网上读到的一个技巧，我试图将其从全部大写改为大写首字母。请参阅此处的代码 - 特别是我们正在查看 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);" />

Answer 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="" />