Désactiver la zone de texte sans changer de style?

Comment pouvez-vous désactiver une zone de texte HTML sans que le navigateur modifie l'aspect visuel de la zone de texte?Désactiver la zone de texte sans changer de style?

Nous désactivons avec JQuery: $(".datepick").attr('readonly', 'readonly');

fonctionne très bien, mais dans Firefox la zone de texte apparaît avec un fond gris et une bordure épaisse. Nous voulons empêcher cela.

La raison pour laquelle nous faisons cela est de faire en sorte que la zone de texte du sélecteur de date JQuery soit en lecture seule (l'utilisateur doit donc utiliser la zone contextuelle du calendrier).

Source

2010-11-11 Marcus Leon

Lorsque j'utilise readonly dans Firefox (3.6.12), il ne me donne pas un fond gris ni une bordure différente. –

Hmm .. Nous sommes sur 3.6.10 –

Je ne reçois pas les différents styles non plus.Je ne peux pas résoudre la partie DatePicker, mais voici quelques CSS pour remplacer le style "disabled": input [disabled] { background-color: #FFF; border-color: # 404040; largeur de bordure: 2px 1px 1px 2px; } (basé sur les styles Firefox par défaut) – attack

Vous pouvez le faire en brouillant la saisie de texte sur focus:

$('.datepick').focus(function(){ 
    this.blur(); 
});

Alternativement, vous pouvez simplement désactiver la saisie de texte dans l'entrée:

$('.datepick').keydown(function(e){ 
    e.preventDefault(); 
});

Source

2010-11-11 20:40:44 lonesomeday

J'ai essayé le 'e.preventDefault();' .. cela a fonctionné sauf que j'ai remarqué sur Chrome que la touche de suppression fonctionnait encore. Je ne pouvais pas entrer de texte mais je pouvais le supprimer après avoir sélectionné une date en utilisant le contrôle - pas ce que je voudrais .. –

@Marcus J'ai édité ma question pour suggérer d'utiliser 'keydown' plutôt que' keypress'. Je préfère la première technique, cependant. – lonesomeday

La première solution (flou) ne fonctionne pas pour moi dans Chrome. La deuxième solution semble bonne! –

-1

à propos de attr('disabled', true). pour réactiver, removeAttr('disabled')

http://jsfiddle.net/E9m3K/3/

^portant le titre handicapés, puisque vous avez demandé à désactiver

http://jsfiddle.net/E9m3K/4/

^portant le titre en lecture seule, vous voulez probablement juste de passer outre/définir explicitement border et background dans le css.

Source

2010-11-11 20:21:59

Cela provoque toujours l'arrière-plan à être gris. ET il arrête le Dateur de date JQuery de travailler. –

Juste mettre un style en arrière-plan? Même avec la bordure .... –

Quels styles changent lorsque vous définissez readonly/disabled = true? –

L'attribut disabled de l'élément input empêche la mise au point et la saisie sans modifier l'apparence.

Source

2010-11-11 20:30:22 BenV

Ne fonctionne pas pour moi. Voir mes commentaires à la réponse @ meder. –

L'attribut disabled empêche également l'affichage de la valeur dans le champ. – Vic

Si vous souhaitez remplacer le style de une zone de saisie désactivée, définissez explicitement le style pour une zone de texte de saisie comme suit:

input[type=text] { 
    color: #000; 
    background-color: #fff; 
} 
/* alternatively you could add textarea to this as well */

En outre, vous pouvez définir une classe css comme « handicapé » chaque fois que vous réglez l'entrée aux personnes handicapées et d'utiliser un style CSS désactivé comme ceci:

input[type=text].disabled { 
    /* disabled styling goes here */ 
}

et ont un code comme ceci:

$(some_input).attr('disabled', 'disabled'); 
$(some_input).addClass('disabled');

et de réactiver le champ que vous pouvez essayer quelque chose comme:

$(some_input).removeAttr('disabled'); 
$(some_input).removeClass('disabled');

Source

2013-04-02 08:09:48 DJTripleThreat

Essayez ceci:

$(".ui-state-disabled").removeClass("ui-state-disabled");

Je travaillais avec des éléments draggable/droppable et je voulais désactiver cette fonctionnalité sans changer leur apparence.

Source

2013-11-29 14:39:51 GameThinks

Désactiver la zone de texte sans changer de style?

Répondre

Questions connexes