html - With Javascript convert disabled input fields into readonly input fields

I have a problem with a form in IE. I have disabled fields in form i,e. field having property disabled="disabled". These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox.

Is there any way to make the text to better font color here?

I thought one way of doing this is removing property disabled="disabled" and add property readonly="readonly" with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me

Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
    </body>
</html>

I am testing this in IE9.

Is there any way to make the text to better font color here?

Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
    </body>
</html>

I am testing this in IE9.

Share Improve this question edited Oct 7, 2012 at 7:33 asked Oct 7, 2012 at 6:37 Jayy 2,4364 gold badges25 silver badges35 bronze badges

1 document.getElementById("textboxid").readOnly = true; try this – Harsha Venkataramu Commented Oct 7, 2012 at 6:41
1 Styling 'disabled="disabled"' will work in IE. What have you tried? – Muthu Kumaran Commented Oct 7, 2012 at 6:43
@MuthuKumaran Yes styling works like background color, borders etc, but input font color does not work in IE. See the code in update of my question. Run the code in HTML and other browsers to see the difference. – Jayy Commented Oct 7, 2012 at 7:01

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

You can change disabled input fields into readonly ones by using the .prop() method available in jQuery. I typically discourage the use of .attr(), and this is why.

$(function (){
    $('input').prop({
        'disabled': false,
        'readonly': true
    });
});

Although the method .removeProp() is available, documentation encourages refrain when using it, because, to quote, it "will remove the property pletely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."

View demo here: http://jsfiddle/teddyrised/tE98z/

document.getElementById("your_field").readOnly=true;

or, with jQuery:

$('#your_field').attr('readonly', true);

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>

    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
        <script type = "text/javascript">
            document.getElementById("disabled-field-id").disabled = false;
            document.getElementById("disabled-field-id").readOnly = true;
        </script>

    </body>
</html>

Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.

http://jsfiddle/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

if you disable the inputs programmatically can set style as you want

try it:

    //bloqueo todos los radiobuttons y checkboxs
  //block all radiobuttons and checkbox
    jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
    jQuery(this).prop("checked", false);
  });
  //bloqueo campos de texto
  //block all text fields
  jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
    jQuery(this).blur();
  });
  //bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

if you want set style they aren't technically disabled

here can see the original code: https://jsfiddle/9kjqjLyq/

You need to depend on a pure javascript(preferrably jQuery) solution.

Add a custom attribute to all your controls:

<input type="text" disabled="true" />

Now you can check if they are disabled and you can proceed to block them using javascript:

var value = yourTextBox.value;    //the last value that the control holds,
                                  //before it was disabled?

$('yourTextBox').click(function() {
    value = $(this).value;
});

$('yourTextBox').blur(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

To add more strictness, add another function:

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

If you want something simple, I would remend this:

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        return false;
});

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744353129a4570093.html

html - With Javascript convert disabled input fields into readonly input fields - Stack Overflow

6 Answers 6

发表回复

评论列表（0条）

联系我们

400-800-8888

html - With Javascript convert disabled input fields into readonly input fields - Stack Overflow

6 Answers 6

相关推荐