使用输入文本占位符在 UPPER 和常规文本之间切换答案

【问题标题】：Switching between UPPER and Regular text using the input text placeholder使用输入文本占位符在 UPPER 和常规文本之间切换
【发布时间】：2015-05-22 16:58:09
【问题描述】：

当输入必须为大写时，是否有更好的方法为占位符设置常规大小写？如果可能的话，对于现代浏览器，我想完全在 CSS3 中完成此操作。

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

输入：

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

当有更改或 keydown 时使用 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 函数，butangphp 等，发现于 www 5/22/2015，jQuery ON
使用 CSS 更改输入的 HTML5 占位符颜色，David Murdoch 等人，发现于 www 5/22/2015，Placeholder
HTML 输入属性（模式），W3School Auth unk，2015 年 5 月 22 日，Patterns W3Schools

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

如果您愿意处理它无法在每个浏览器中工作，您可以简单地为占位符设置一个不同的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;
}

&lt;input type="text" placeholder="place holder" /&gt;

【讨论】：