Forcing form text to be lower-case

Question

How could I force the text in the \"username\" text input to be lower-case regardless of what user types?

   

        
                      

              相关标签:
       
      

Answer 1

You have to use javascript. I have an example here: 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 2

You can use something as

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

and it should work in the latest browsers For more details check this link

Answer 3

setInterval() will run if the user pastes something in

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);

because this is a loop function using .replace(), replacing only first occurrence at a time, but still looping all of them, this appears to animate removing spaces on pasted text.

Answer 4

Use onchange instead

<input name="username"
  onchange="this.value = this.value.toUpperCase();"
  style="text-transform: lowercase; height:35px; width:300px"

  class="registerfont"
  type="text"
  id="username"
  maxlength="15"
>

Answer 5

@fdiv_bug's answer is good except for the issues mentioned in the comments of their answer. Using the input event instead of the keyup event fixed those issues for me.

HTML:

<input oninput="this.value=this.value.toLowerCase()"/>​

Javascript:

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