在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：

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n