I want to have a form textfield automatically uppercase the text entered as it is typed in. I was hoping that there was as set-able property that would allow for this but I’m unable to find one.

$form['elementName'] = array( '#type' => 'textfield', '#title' => $this->t('Address'),... )

The searches I have done so far point to the use of ‘Plugins.’ However if there is a simple(er) solution I prefer that. Any ideas appreciated;

  • Is there any reason why you did not try a JS solution? "change case as you type" is pretty much a JS use case.
    – AKS
    Commented Mar 2, 2016 at 16:07
  • yeah, it's pretty much obvious that it would best be done by js. I was just hoping that there might be a textfield 'property' that drupal would recognize and build the js to perform this.
    – Mike
    Commented Mar 2, 2016 at 16:48

2 Answers 2


However if there is a simple(er) solution I prefer that.

Sorry, maybe I going too deep, but the most simpler solution that you can use just for display is a CSS solution.

Based in your example:

input[name='elementName'] {
  text-transform: uppercase;

That's it, any char will be uppercase in your textfield. If need store in uppercase, just change case before save.

  • if the text in the field is in UPPERCASE why wouldn't it be stored that way when submitted?
    – Mike
    Commented Mar 2, 2016 at 20:17
  • @Mike Simple, the text only display UPPERCASE, its value not in uppercase. If you check the value of your input you will see that is exactly way that was typed (if typed with caps, 'A' or 'a' otherwise).
    – Vagner
    Commented Mar 2, 2016 at 20:21
  • Vagner, You are absolutely correct; the submitted value is as it was typed. While I want both -- submitted and typed to be uppercased -- you answered the question as asked. It also showed me something new and interesting.
    – Mike
    Commented Mar 2, 2016 at 21:48
  • @Mike, if you creating a class that implements FormInterface just use submitForm function to get the values and use strtoupper php function to change case and then you can store. This is was talking in 'just change case before save'. ;)
    – Vagner
    Commented Mar 2, 2016 at 21:59

The easy solution would be to do this in a submit handler before the value is actually saved.

If this is for display purpose - the Drupal way is to not alter what is saved, but alter how it appear on screen.

  • it is for display; thus the hope for property js solution.
    – Mike
    Commented Mar 2, 2016 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.