强制表单文本为小写

Question

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>

Answer 1

在CSS中:

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

否则在JS:

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

Answer 2

你必须使用JavaScript.我在这里有一个例子:http://jsfiddle.net/xCfdS/3/

HTML: <input type="text" id="txt" onkeyup="return forceLower(this);"/>?

使用Javascript:

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

Answer 3

你可以使用某些东西

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

它应该在最新的浏览器中工作有关更多详细信息,请查看此链接

Answer 4

除了答案评论中提到的问题之外，@fdiv_bug 的答案很好。使用 input 事件而不是 keyup 事件为我解决了这些问题。

\n\n

HTML：

\n\n

<input oninput="this.value=this.value.toLowerCase()"/>\xe2\x80\x8b\n

\n\n

JavaScript：

\n\n

element.addEventListener(\'input\',function(){this.value=this.value.toLowerCase()});\xe2\x80\x8b\n

\n

Answer 5

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

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

Answer 6

结合大家的一些回答可以简化事情。

1. 使用 CSS 来避免任何闪烁并用于显示目的。

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

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

2. 将事件侦听器添加到输入。

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

我们可以像平常一样将其发送到服务器，并且像其他人提到的那样，检查服务器端以确保恶意用户没有向我们发送 UpPPercaSe 输入。