Javascript 强制表单文本为小写

我如何强制“用户名”文本

input

中的文本为小写，而不考虑用户类型

<div class="register">
   <label for="username">Select username:</label>
</div> 
<div class="registerform">
    <input name="username" class="registerfont" type="text"
           id="username" maxlength="15" style="height:35px; width:300px">
</div>

选择用户名：

在CSS中：

form input[type="text"] {
    text-transform: lowercase;
}

否则在JS中：

var text="this is my text.";
var lowercase=text.toLowerCase();

---

你必须使用javascript。我举了一个例子：

HTML:

​

Javascript:

function forceLower(strInput) 
{
strInput.value=strInput.value.toLowerCase();
}​

element.addEventListener('input',function(){this.value=this.value.toLowerCase()});​

假设输入ID为username，则使用jquery

你可以用一些东西作为

<input autocapitalize="none" ></input>



而且它应该在最新的浏览器中工作
有关更多详细信息，请查看此
这是我的建议，它基于@fdiv bug和@ali sheikhpour的答案：

为该字段添加
input[type=“email”]{
文本转换：小写；
}

捕获此字段上的“更改”事件，并通过（字符串）toLowerCase函数将值转换为小写
var upperCaseMatch=/[A-Z]/；
var事件={
改变：“改变”
};
$（函数（）{
$（文档）.on（'change'，'input[type=“email”]”，function（）{
var值=$（this.val（）；
如果（！upperCaseMatch.test（值））{
返回；
}
$（this.val（value.toLowerCase（））；
});
});

希望它对你有用。
@fdiv\u bug的答案是好的，除了他们答案评论中提到的问题。使用输入事件而不是keyup事件为我修复了这些问题

HTML:

我使用以下简单代码：

<input type="text" onkeyup="this.value = this.value.toUpperCase();">

将每个人的答案结合起来，可以简化事情

使用CSS避免任何闪烁，并用于显示目的

input[type="username"] {
  text-transform: lowercase;
}


现在，因为这只会影响浏览器中文本的显示，所以我们还需要更改输入的值

const usernameInput = document.querySelector('input[type="username"]');
usernameInput.addEventListener("input", function(e){
  e.target.value = e.target.value.toLowerCase();
});

将事件侦听器添加到输入

const usernameInput = document.querySelector('input[type="username"]');
usernameInput.addEventListener("input", function(e){
  e.target.value = e.target.value.toLowerCase();
});


我们可以像正常情况一样将其发送到服务器，并且像其他人提到的那样，检查服务器端以确保恶意用户没有向我们发送UPPERCase输入。
setInterval（）
将在用户粘贴内容时运行

setInterval(function(){
  let myinput = document.getElementById('myinput');
  //make lowercase
  myinput.value = myinput.value.toString().toLowerCase();
  //remove spaces (if you want)
  myinput.value = myinput.value.toString().replace(' ', '');
  //force specific characters
  myinput.value = myinput.value.toString().replace(/[^a-z0-9\/\-_]/, '');
}, 10);

由于这是一个使用
.replace（）
的循环函数，一次只替换第一次出现的内容，但仍然循环所有内容，因此这似乎是在粘贴文本上删除空格的动画。
改用onchange


使用jquery，假设输入ID是用户名：

$(document).ready(function(){
    $("#username").on('input', function(){
        $(this).val( $(this).val().toLowerCase() );
    })
});

你介意使用javascript吗？你需要使用javascript，我想你有客户端代码吧？你真的需要在那里做。还有
文本转换：小写
，但这是仅显示。您希望它在键入时使用小写吗？还是要全部以小写字母提交？这只是显示。我认为我们可以假设OP想要改变案例，而不是瞬间改变它的外观。这实际上是最好的美学解决方案，只要你在提交时将其与服务器端转换相结合。接受的答案将在用户每次按键时短暂闪烁大写字母。因为数据验证和“修复”只应在服务器端完成。仅仅依靠js来评估表单数据会让你面临黑客攻击。例如，禁用js，就可以创建一个用户名为“Admin”（大写A）的帐户，并开始钓鱼其他用户。此外，在键入表单字段时编辑表单字段可能会在某些浏览器或亚洲键盘中导致光标放置问题，这些浏览器或亚洲键盘要求每个字符输入1-3个键。CSS版本比javascript版本好，只要您在后端也这样做。否则js的东西就真的不可靠了。请看我上面的评论，它打破了“全选/删除”，而keyup上的转换是不和谐的。带有后端解决方案的CSS解决方案应该是最好的/公认的答案。这当然也需要在服务器上强制执行。@steveax你是说在数据库中吗？@John在服务器的某个地方，这是由数据库还是其他东西强制执行取决于您，但您不能完全依赖客户端脚本，因为它很容易规避。这是不可靠的。首先，用户输入一个大写字母，然后在keyup上转换它。我猜已经足够好了-直到用户尝试选择全部并删除。它只删除最后一个字母。对我的口味来说太不稳定了，不值得生产。同意-我个人更喜欢下面的CSS解决方案，这就是我解决这个问题的方法。无论哪种方式，如果要存储转换后的数据，都必须在服务器上进行验证，因此UI所做的只是显示。CSS用于显示。这不起作用：
autocapitalize=“none”
表示“不自动将单词/字符大写”。这并不意味着“禁止使用大写字符”。这非常方便。谢谢。这正是我想要的——谢谢！此外，它对输入中的第一个字母不起作用，即使您添加autocapitalize，它也是大写的。读取它应该可以。检查没有太多的支持。伟大的答案！为我工作得很好！如果我返回到字符串的任何位置并输入大写键，光标将移动到字符串的末尾。除非作者要求，否则最好不要依赖外部库
$(document).ready(function(){
    $("#username").on('input', function(){
        $(this).val( $(this).val().toLowerCase() );
    })
});