用CapsLock将输入更改为上例

Question

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

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

=测试名称

预期:测试名称

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

Caps离开=测试名称

默认:测试名称

我知道一些名称看起来像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" />

​

Answer 2

style="text-transform: capitalize"

(问题经编辑。(新答案。)

给您的输入一个id，在这个例子中，假设它被称为"theInputId“。然后向它添加一个onkeypress事件，并调用下面列出的函数脚本。

<input placeholder="Brand Name" style="text-transform: capitalized" 
 type="text" id="theInputId" onkeypress="capsLock(event)">


<script>
//Script to check if Caps Lock is on.
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('theInputId').style.textTransform = 'lowercase'
document.getElementById('theInputId').style.textTransform = 'capitalize'
}
}
</script>

Answer 3

要输入输入中所有的大写文本吗？然后，您可以在css中使用文本-transform:uppercase，如果您想在输入时更改它，您可以在输入的keyup上使用toUpperCase()。