CODEWITHSUNDEEP
javascript
Jordash
Jordash

Reputation: 1217

How to make everything lowercase automatically in Javascript as they type it in

How do I make all of the characters of a text box lowercase as the user types them into a text field in Javascript?

<input type="text" name="thishastobelowercase">

Thanks for any help.

Upvotes: 15

Views: 21059

Answers (7)

BkiD
BkiD

Reputation: 694

I know this is 10 years later, but here's an easier way that I've found to do this - in case someone is still trying to do this.

Add the following event handler to the input tag in your HTML -

oninput="event.target.value = event.target.value.toLowerCase();"

Run the snippet below to test it out. 

const formElement = document.getElementById('lowercaseInput');

formElement.addEventListener('submit', function(e) {
  e.preventDefault();
  e.stopPropagation();
  e.stopImmediatePropagation();
  const formData = Object.fromEntries(new FormData(e.target).entries());
  console.log(formData);
});
/* Copied from Bootstrap 4 styles */

.form-control {
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  color: #495057;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: calc(1.6em + 0.75rem + 2px);
  line-height: 1.6;
  padding: 0.375rem 0.75rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn {
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  color: #ffffff;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  padding: 0.375rem 0.75rem;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  cursor: pointer;
}
<h2>Note: Most of this code is just eye-candy.</h2>
<h3>The HTML for the "input" tag is the only important part here.</h3>

<form id="lowercaseInput">
  <input class="form-control" type="text" oninput="event.target.value = event.target.value.toLowerCase();" name="lowercaseText"/>
  <br>
  <button class="btn" type="submit" title="This will log the FormData values">Fake Form Submit</button>
</form>
<h4>Hit the "fake form submit" button to see what the server would get.</h4>
<br><br><br><br><br><br><br><br><br><br>

Upvotes: 0

Kardo
Kardo

Reputation: 1718

Bootstrap Text transform: 

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Upvotes: -2

Doglas
Doglas

Reputation: 670

This is a mask for the type of validation that you want

(function($) {
    $.fn.maskSimpleName = function() {
        $(this).css('text-transform', 'lowercase').bind('blur change', function(){
            this.value = this.value.toLowerCase();
        });
    }
})(jQuery);

The advantage of using it is that the cursor will not go to the end of the input each character entered, as it would if using the a keyup or keupress solution.

$('#myinput').maskSimpleName();

This is a way to use it.

Obs: This mask sends the data in lowercase to the server as well.

Upvotes: 0

Justin Beckwith
Justin Beckwith

Reputation: 7866

I would just make CSS do this for you instead of monkeying around with javascript:

<input type="text" name="tobelowercase" style="text-transform: lowercase;">

Upvotes: 30

Mrchief
Mrchief

Reputation: 76248

Two ways:

Using CSS:

.lower {
   text-transform: lowercase;
}

<input type="text" name="thishastobelowercase" class="lower">

Using JS:

<input type="text" name="thishastobelowercase" onkeypress="this.value = this.value.toLowerCase();">

Upvotes: 14

BishopRook
BishopRook

Reputation: 1260

Does it only have to display in lowercase, or does it have to be lowercase? If you want to display lowercase, you can use CSS text-transform: lowercase.

You need to enforce this constraint server-side anyway, because the user can disable any JS code you put in to enforce that it remains lowercase.

My suggestion: use the CSS text-transform to make it always display in lowercase, and then do a toLower or your language's variant of it on the server-side before you use it.

Upvotes: 4

bjornd
bjornd

Reputation: 22951

$('input').keyup(function(){
    this.value = this.value.toLowerCase();
});

Upvotes: 9

Related Questions