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

To make it appear like the text is lowercase, without changing the value of the field in reality when submitted to the server or when copy-pasted, use this CSS:

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

If you want to lowercase a string in JavaScript, use this code:

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

To turn off the automatic capitalization of words on the virtual keyboards of mobile browsers, use this code:

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

It should work in the latest mobile browsers. For more details check this link.

This will not prevent a user from deliberately choosing to enter capital letters.

Answer 4

Using jquery assuming that the input ID is username this can help:

Footnote: Thanks to @Flimm comment, I modified the original answer by adding two extra lines to prevent jumping of the cursor to the end of input if the cursor was not at the end position.

$(document).ready(function(){
    $("#username").on('change keyup paste',function(e){
     
      //preserving the position of the cursor
      var start = e.target.selectionStart;
      
      //Converting text to lowercase
      $(this).val($(this).val().toLowerCase());
      
      //Jumping back to the old position of the cursor
      e.target.selectionStart = e.target.selectionEnd = start;
    })
})

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

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 9

I use this simple code :

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

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

This JavaScript will convert the text to lowercase as the user is entering it. It will remember the cursor position, to avoid the cursor being set to the end if the user enters a character in the middle of the existing text.

I also set autocapitalize to off so that uppercase letters are not automatically displayed on the virtual keyboard in mobile browsers.

var element = document.querySelector("input");
element.addEventListener('input', function(e) {
  const position = e.target.selectionStart;

  // Lowercase the text, which happens to also reset the selection:
  e.target.value = e.target.value.toLowerCase();

  // Restore the cursor position to where it was:
  e.target.setSelectionRange(position, position);
});

<input type="text" autocapitalize="off">

Answer 12

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 13

Using jquery assuming that the input ID is username:

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