javascript - 在 CapsLock 开启的情况下将输入更改为大写

Question

我只是想知道是否可以在某个 input 字段上将输入自动更改为 capitalized，用户在该字段中输入了一个大写锁定的值。

 <input placeholder="Brand Name" style="text-transform: capitalized" type="text" />

上限 = 测试名称

预期:测试名称

 <input placeholder="Brand Name" style="text-transform: capitalized" type="text" />

Caps Off = 测试名称

默认:测试名称

我知道有些名称看起来像 Reader Van der Bank，其中并非所有名称部分都大写，但仍然想知道它是否可能。谢谢

备选方案:认为我可能正在使用 php 函数将所有内容转换为小写，然后大写。

Answer 1

如果没有 CSS 解决方案，这里有一个 javascript 函数可以做到这一点。

var id = document.getElementById("test");

function change() {
  var arr = id.value.split(" ").map(function(x) {
    return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
  });
  id.value = arr.join(" ");
}
id.addEventListener("change", change);
id.addEventListener("keyup", change);

<input placeholder="Brand Name" id="test" type="text" />

对于类为 test 的多个元素

var elements = document.getElementsByClassName("test");

function change() {
  var arr = this.value.split(" ").map(function(x) {
    return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
  });
  this.value = arr.join(" ");
}


for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("change", change);
  elements[i].addEventListener("keyup", change);
}

<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />