在 CSS 中将输入值设为大写而不影响占位符

Question

有没有办法可以将输入值设置为大写而不将占位符设置为大写？

看来我得到了其中之一。我更喜欢仅使用 CSS（JS 最后的手段）来干净地完成此操作。

Answer 1

每个浏览器引擎都有不同的实现来控制

placeholder

样式。使用以下内容：

jsBin 示例。

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

不用说，这只适用于可以处理占位符的浏览器。 (IE9/10+)

Answer 2

我知道您说过使用 JavaScript 是最后的手段。然而，在这种情况下，它可能更有效、更简单（而且如果你不使用 JavaScript，提交时发布的值将不会是大写），所以这可能会更好，并且不需要额外的 CSS：

<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />

有些人抱怨编辑值时光标跳到末尾，所以这个稍微扩展的版本应该可以解决这个问题：

<input oninput="let p = this.selectionStart; this.value = this.value.toUpperCase();this.setSelectionRange(p, p);" />