How to make a read-only textbox using jQuery

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a read-only textbox using jQuery
A readonly text input element presents text to the user that is not editable. (Chad Baker/Digital Vision/Getty Images)

With the jQuery JavaScript code library, you can create and control interactive user input elements in web pages. With jQuery, you can manipulate the properties of such input elements, which typically appear within HTML forms. If you need to create a text-box and make it function on a readonly basis within your page, you can do so using a small amount of jQuery code. The resulting text-box will display text to the user, but the user will not be able to edit or remove the displayed text string.

Skill level:
Moderately Easy


  1. 1

    Open your HTML page. If you do not already have jQuery referenced within your page, do so now. You can link to the script directly in the HTML head section as follows: <script src=""></script>

    If you prefer to use a jQuery installation on your own server, download and copy it there, updating the script link markup element to reflect the location you have it stored at.

  2. 2

    Create user input elements. If you already have a form and text input element you can use those. If not create them now. In the body section of your page, add a form element as follows: <form> <!--input elements--> </form>

    You can alter the opening form tag to reflect any action you want performed when the form is submitted by the user. Inside the form, between its opening and closing tags, add a text input element as follows: <input type="text" name="user_text" id="text_in" value="some text"/>

    Alter the code if necessary to use the name, ID and value of your choice. If you prefer to use a class attribute rather than an ID attribute, use the following syntax guide: <input type="text" name="user_text" class="text_in"/>

  3. 3

    Start jQuery processing. If you already have jQuery functioning within your page, you can add the code necessary set the text-box to readonly to your existing functions. If not, add a function to start jQuery when the page is loaded, in a script section in the page head as follows: <script type="text/javascript"> $(document).ready(function(){ //jQuery processing }); </script>

    If you want to create the text input element in jQuery rather than coding it in HTML, you can do so as follows in the document ready function: $("<form>").append("<input type='text' name='user_text' id='text_in' value='some text'/>");

  4. 4

    Set the text-box to be readonly. Add the following code to the function in which your jQuery processing takes place: $('#text_in').attr('readonly', true);

    This works for the specified ID attribute. If you included a class attribute use the following code: $('.text_in').attr('readonly', true);

    The code first selects the element within the page, then sets the readonly attribute on it. The text input element should now function on a readonly basis.

Tips and warnings

  • The jQuery "attr" function can set other HTML attributes on selected elements.
  • If you set a text input element to be readonly, the only text that will be displayed within it will be the text you set to display in your page code, either via HTML or JavaScript.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.