Question

当输入必须是大写时，是否有更好的方法为占位符定期？如果可能的话，我希望在现代浏览器中完全使用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 function，butangphp et al。，发现于www 5/22/2015，jQuery ON
使用CSS更改输入的HTML5占位符颜色，David Murdoch等，发现于www 5/22/2015，Placeholder
HTML输入属性（模式），W3School Auth unk，2015年5月22日，Patterns W3Schools

Answer 1

如果您愿意处理它而不是在每个浏览器中工作，您只需为占位符设置不同的text-transform：

＆＃13;

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

＆＃13;

<input type="text" placeholder="place holder" />

＆＃13;

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

1 个答案: