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?

<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

in CSS:

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

otherwise in JS:

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

Answer 2

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 3

You can use something as

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

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

Answer 4

Using jquery assuming that the input ID is username

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

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()});​

Answer 6

Combining a bit of everyone's answer to here simplify things.

1. Use CSS to avoid any flashing and for display purposes.

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

Now, because this ONLY effects DISPLAY of the text in the browser, we need to also change the value of the input.

2. Add an event listener to the input.

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

We can send this to the sever like normal and, like others have mentioned, check server-side to make sure a malicious user didn't send us UpPPercaSe input.

Answer 7

This is my suggestion, it's based on the answer from @fdiv-bug & @ali-sheikhpour:

1. Add text-transform: lowercase; for this field.

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

2. catch "change" event on this field and transform value to lowercase by (String)toLowerCase function.

var upperCaseMatch = /[A-Z]/;
var events = {
    CHANGE: 'change'
};

$(function() {
    $(document).on('change', 'input[type="email"]', function() {
        var value = $(this).val();
        if (!upperCaseMatch.test(value)) {
            return;
        }
        $(this).val(value.toLowerCase());
    });
});

Hope its useful for you.

Answer 8

I use this simple code :

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

Answer 9

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 10

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 11

Old question. New answer.

With HTML5 Form Validation now (2021) supported across all major browsers, it is relatively simple to force lowercase text on an input field, client side, using the pattern attribute. (The pattern attribute is supported by all but Opera Mini at the time of writing).

HTML:

<label>Field Name (lowercase letters only)</label>
<input type="text" pattern="[a-z]" placeholder="Field Name (lowercase letters only)">

---

Note: The below follows from but gets semi out of scope of the question.

Forcing lowercase on an email address field (which is what brought me to this question) seems to be more risky as using pattern/rejex to validate email addresses is fairly complicated and there are potential issues associated with implementing pattern in conjunction with type="email".

The above aside, for my use case, the following pattern was sufficient:

<label>Email Address (lowercase letters only)</label>
<input type="email" pattern="[^A-Z]+" placeholder="Email Address (lowercase letters only)">

The rejex expression [^A-Z]+ allows any characters that aren't capitals. I leave the actual email address validation to the browser via type="email". I tested this on desktop in Chrome, Firefox, Edge and IE11 and all worked fine.

Answer 12

Using jquery assuming that the input ID is username:

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