如何在输入字段上强制小写？ [关闭]答案

【问题标题】：How do I force lowercase on an input field? [closed]如何在输入字段上强制小写？ [关闭]
【发布时间】：2016-04-11 22:59:17
【问题描述】：

我有一个客户只想小写的输入字段。所以输出也会将输入生成为小写。

这是我目前拥有的，但它不起作用。

<script>
function toLowerCase(email) {
    strInput.value=strInput.value.toLowerCase();
}
</script>

【问题讨论】：

不要强制用户只输入小写字母，使用时将字符串转为小写
将其绑定到按键事件处理程序。
怎么不工作？你有错误吗？你是如何调用函数的？ HTML 是什么样的？您实际上在哪里使用传递给函数的email 参数？
style="text-transform: lowercase"
@CodeiSir 这只会改变样式，而不是实际值。

标签： javascript lowercase

【解决方案1】：

您可以强制 text-transform: lowercase; 作为输入样式

&lt;input type="text" style="text-transform: lowercase"&gt;

【讨论】：

我不知道为什么这被否决了。它是一个完全有效的 UI 解决方案。它可以防止键盘上的大写到小写闪烁。开发人员只需要确保在使用时将值设置为小写即可。
可能是因为提交时字符仍然是大写username: AdmIni22，在 UI 上全部显示为小写，但在提交时它仍然被拾取，所以如果你想混淆自己的解决方案更多:)

【解决方案2】：

使用oninput:

var input = document.getElementsByTagName("input")[0] // just your input element

input.oninput = function() {
  input.value = input.value.toLowerCase()
}

&lt;input type="text" /&gt;

【讨论】：

这个问题是如果你需要回去编辑一些东西。插入符号反复移动到输入的末尾。
正确的代码是input.oninput = function(event) { event.target.value = event.target.value.toLowerCase() }（带有适当的空值检查）

【解决方案3】：

使用模式：

<input pattern="[a-z0-9]+" title="Only lowercase / numbers allowed" />

【讨论】：

当您可以自动将其转换为小写时，责备用户输入大写将是一种耻辱。
你应该提到some browsers won't support it

【解决方案4】：

改用 CSS3 属性。

text-transform: lowercase;

https://jsfiddle.net/ho8zcw68/

【讨论】：

这只会改变输入文本的样式，不会改变实际值。
以后可以通过value.toLowerCase()自行修改
这对已经在问题中包含toLowerCase 的 OP 有何帮助？
好！！简单且工作正常