Change Font Style in Text Field Using Drop Down in JavaScript | Code Snippet

Change-Font-Style-in-Text-Field-Using-Drop-DownCode Snippet #7: Today we found the below code snippet to help the JavaScript lovers to change font style in a text field using a drop down menu.

Changing the font style and weight using JavaScript can be very helpful, if a user wants to know how the font would look like after posting a comment or for changing the font style according to a user’s taste when they are composing the text in the textfield or textarea.

Dynamically, we can change the font style in a textfield and textarea or any other document area using JavaScript. This code snippet is a small beginning on how to change font style using JavaScript, can be enhanced to ones needs to make it work in different ways.

Demo: [Change the drop down to see the effect]

HTML Code we wrote:

JavaScript Code:

In the above HTML, we easily create a form for the drop down and the text field. And use the onChange=”validate()” style to validate the textfield contents on changing the drop downs.

Here setFont() function is invoked. In the JavaScript function, we get the ID to font and place it in a variable by name “selectFont”. The code

is used to get the selected font value and we store the same in selectFontValue variable. We use a if loop to find out if the selected value is matching with the value given in the options, if so then set the font style corresponding to that using the below code:

That’s how we make different options behave differently with the selections.

Hope you liked this code snippet. Please let us know how this code can be enhanced using the comment form. We are always looking forward to suggestions and recommendations.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...