How to force the text of the input box to be displayed in uppercase? (code example)

The content of this article is to introduce how to force the text of the input box to be displayed in uppercase? (Code sample), let everyone master multiple methods of forced conversion to uppercase. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Sometimes, in a form, you only want to accept uppercase text in certain input or textarea fields. So how do I force input lowercase letters to be converted to uppercase text? From JavaScript to CSS and server-side code, there are actually many ways to solve this annoying problem.

Let’s take a look at the implementation method through a simple code example.

1. Use JavaScript to change text when inputting (must use English input)

Use toUpperCase() to convert uppercase

This is the most obvious and common method, but also the least user-friendly. On every keystroke, a JavaScript event is fired to convert the value to uppercase.

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

Let’s take a look at the effect. Enter a lowercase ‘a’ and it will appear:

But this method will cause other problems :

1. When we use the Chinese input method and press shift to input characters, repeated characters will appear; therefore, English input must be used.

2. Try entering "AAA" in the input box above, select the "A" in the middle and try to change it to "ABBA". What you end up with is 'ABAB' because setting the value moves the cursor to the end of the text.

Next we improve it, we canlocate the cursor position

If you move the cursor to an earlier position in the text and type, it will be echoed to have been entered the end of the text. So we need some extra code to preserve the cursor position:

<input type="text" onkeyup="
  var start = this.selectionStart;
  var end = this.selectionEnd;
  this.value = this.value.toUpperCase();
  this.setSelectionRange(start, end);
">

To see the effect, enter ss:

and when we enter "AAA", select The "A" in the middle and try to change it to "ABBA", the result of 'ABAB' will no longer appear.

2. Use css php to change text

Actually, it doesn’t matter if the form input is uppercase or lowercase. It is important that:

1. The text seen by the user will be used;

2. Our form handler converts the text to uppercase before use.

With this in mind, we can ditch all the preceding JavaScript and instead use a simple CSS and PHP (or equivalent backend) solution:

html css code

<input style="text-transform: uppercase;" type="text" name="fieldname">

php code:

<?PHP
  $_POST[&#39;fieldname&#39;] = strtoupper($_POST[&#39;fieldname&#39;]);
?>

Rendering:

Do you see how easy it is if you use the proper techniques! A single CSS style (can be moved to an external stylesheet), plus a line of PHP, may already exist. No JavaScript or jQuery required.

Summary: The above is all the content introduced in this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to force the text of the input box to be displayed in uppercase? (code example). For more information, please follow other related articles on the PHP Chinese website!