使用输入文本占位符在大写文本和普通文本之间切换

Switching between UPPER and Regular text using the input text placeholder

本文关键字：文本 之间 输入 占位符      更新时间：2023-09-26

当输入必须为大写时，是否有更好的方法为占位符使用常规大小写?如果可能的话，我想在现代浏览器中完全使用CSS3。

原因是当我切换回小写时，在添加或删除大写时似乎有点复杂，然后占位符以常规文本出现。有模式，但它不能用于切换到大写的用户输入和切换回常规的占位符。

输入:

<input name="myInputText" data-case="UPPER" data-placeholder-case="regular" pattern="[A-Z]*" type=text placeholder="You will be FORCED to use UPPERCASE!" />

使用JQuery val().toUpperCase()当有一个变化或按键事件:

$("myInputText").on("keydown", function() {
 if ($("myInputText").val().length > 0)
 {
  $("myInputText").val("myInputText").val().toUpperCase());
  $("myInputText").css("text-transform", "uppercase");
 } else { $("myInputText").css("text-transform", ""); }
}).on("change", function() {
 if ($("myInputText").val().length > 0)
 {
  $("myInputText").val("myInputText").val().toUpperCase());
 } else { $("myInputText").css("text-transform", ""); }
});
参考文献:
    jQuery On function, butangphp Et al.， Found On www 5/22/2015, jQuery On
  1. 用CSS改变一个输入的HTML5占位符颜色，David Murdoch Et al.， Found on www.5/22/2015，占位符
  2. HTML输入属性(模式)，W3School Auth unk, 5/22/2015, Patterns W3Schools

如果你愿意处理它不能在每个浏览器中工作，你可以简单地为占位符设置一个不同的text-transform:

input {
  text-transform: uppercase;
}
::-webkit-input-placeholder {
  text-transform: none;
}
:-moz-placeholder {
  text-transform: none;
}
::-moz-placeholder {
  text-transform: none;
}
:-ms-input-placeholder {
  text-transform: none;
}
<input type="text" placeholder="place holder" />

相关文章：