Question

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

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

上限 = TEST NAME

预期：测试名称

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

关闭 =测试名称

默认值：测试名称

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

替代方案：想想我可能正在使用php函数将所有内容转换为小写然后大写。

Answer 1

如果没有CSS解决方案，这是一个javascript函数。

＆＃13;

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);

＆＃13;

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

＆＃13;

对于类test

的多个元素

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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，如果你想在输入时更改它，你可以在该输入的toUpperCase()上使用keyup。

使用CapsLock将输入更改为大写

3 个答案: