Avec Javascript convertir désactivé entrée des champs en lecture seule champs de saisie

J'ai un problème avec un formulaire dans IE. J'ai désactivé les champs dans le formulaire i,e. champ ayant la propriété disabled="disabled". Ces champs indiquent l'entrée de texte en couleur gris et qui a l'air très terne/floue et si j'essaie d'appliquer le style css des modifications à ces champs, il ne fonctionnera pas pour IE, mais il fonctionne pour les autres navigateurs comme chrome, firefox.

Est-il un moyen de rendre le texte pour mieux la couleur de la police ici?

J'ai pensé à une façon de le faire est de retirer la propriété disabled="disabled" et ajouter une propriété readonly="readonly" avec javascript. Si cela est possible, alors comment puis-je le faire avec Javascript. Je suis nouveau sur le Javascript, donc s'il vous plaît aider moi

HTML ci-dessous pour expliquer le comportement. Exécuter ce dans IE et d'autres navigateurs pour voir la différence.

<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>

Je suis en train de tester cela dans IE9.

document.getElementById("textboxid").readOnly = true; essayez ce
Styling " disabled="disabled" " fonctionnent dans IE. Qu'avez-vous essayé?
Oui style fonctionne comme couleur d'arrière-plan, bordures etc, mais d'entrée la couleur de la police ne fonctionne pas dans IE. Voir le code dans la mise à jour de ma question. Exécutez le code dans le HTML et les autres navigateurs pour voir la différence.

OriginalL'auteur Jayy | 2012-10-07

2

Vous pouvez modifier désactivé entrée des champs en lecture seule en utilisant le .prop() méthode jQuery. En général, je décourager l'utilisation de .attr(), et c'est pourquoi.
```
$(function (){
    $('input').prop({
        'disabled': false,
        'readonly': true
    });
});
```
Bien que la méthode .removeProp() est disponible, documentation encourage à s'abstenir lors de son utilisation, parce que, pour citer, il "vise à supprimer la propriété complètement et, une fois retiré, ne peut pas être ajouté à nouveau à l'élément. Utilisation .prop() de définir ces propriétés à false à la place."

Voir la démo ici: http://jsfiddle.net/teddyrised/tE98z/

OriginalL'auteur Terry

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

ou, avec jQuery:

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

OriginalL'auteur Alcides Queiroz Aguiar

<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>

cela ne fonctionne pas pour IE, mais fonctionne sur chrome
Ajouter cette <input type="text" disabled="disabled" class="disabled" />
Cela permettra de le faire fonctionner sur IE je crois
Il est censé travailler sur IE6 et au-dessus! Va essayer de violon et de le poster ici.
jsfiddle.net/GdZvF

OriginalL'auteur Harsha Venkatram

Utiliser le setAttribute de la propriété. Remarque dans l'exemple que si 1 sélectionnez appliquer l'attribut lecture seule sur zone de texte, sinon supprimez l'attribut en lecture seule.

http://jsfiddle.net/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>

OriginalL'auteur Diogo Rodrigues

si vous désactivez les entrées par programme pouvez définir le style que vous voulez

essayer:

    //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);
  });

si vous voulez un style qu'ils ne sont pas techniquement désactivé

ici peut voir le code d'origine: https://jsfiddle.net/9kjqjLyq/

OriginalL'auteur Robert Blasco Villarroya

-2

Vous avez besoin de dépendre d'un pur javascript(de préférence jQuery) solution.

Ajouter un attribut personnalisé pour toutes vos commandes:

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

Vous pouvez maintenant vérifier si elles sont désactivées et vous pouvez continuer à les bloquer à l'aide de 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;
});

Pour ajouter plus de rigueur, ajouter une autre fonction:

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

Si vous voulez quelque chose de simple, je vous recommande ceci:

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

Où en "Javascript" tu veux dire "JavaScript y compris la bibliothèque jQuery"... Aussi, .Value devrait être .value (en minuscules "v").

OriginalL'auteur Sean Vaughn

Vous devez vous connecter pour publier un commentaire.