serenix_readonly.js is a JavaScript (jQuery) plugin created to fix read-only attribute inconsistencies in form controls such as input, select, checkbox, and radio. Make the controls on the form – even <select> – read-only. Items made read-only remain focusable: they are not disabled.

how to make text field non editable in html, input readonly javascript, how to make input field not editable, make input readonly jquery, html input readonly vs disabled

Usage

Two functions are exported: read-only and toggle read-only.

The first argument for any of them could be either:

• specific.
• one item.
• An array of items (Array or NodeList).

How to make use of it:

1. Load the serenix_readonly.js JavaScript library into the document.

<!-- jQuery Is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- serenix_readonly.js Plugin -->
<script src="/path/to/serenix_readonly.js"></script>

2. Make form fields read-only.

// basic
readonly('input, select');

// or
readonly('input, select', true);

// as a jQuery plugin
$('input, select').readonly(true);

3. Remove read-only status from form fields.

// basic
readonly('input, select', false);

// as a jQuery plugin
$('input, select').readonly(false);

4. Switch between read-only and editable states using the toggleReadonly method.

toggleReadonly('input, select'));

Create Readonly Form Fields Without Disabling, serenix_readonly.js Plugin/Github, input readonly not working, how to make text field editable in html, input readonly html

See Demo And Download

Official Website(marckol): Click Here

This superior jQuery/javascript plugin is developed by marckol. For extra Advanced Usages, please go to the official website.