Restringir a seleção da opção SELECT sem desabilitar o campo
-
09-06-2019 - |
Pergunta
Eu tenho um campo SELECT de seleção múltipla cujo valor não quero que o usuário final possa alterar.
Por motivos de interface do usuário, gostaria de poder fazer isso sem usar o atributo desativado = "true".Tentei usar onmousedown, onfocus, onclick e configurar cada um para desfocar ou retornar falso, mas sem sucesso.
Isso pode ser feito ou estou tentando fazer o impossível?
Solução
Eu sei que você mencionou que não quer, mas na verdade acho que usar o disabled
atributo é uma solução melhor:
<select multiple="multiple">
<option value="volvo" selected="true" disabled="disabled">Volvo</option>
<option value="saab" disabled="disabled">Saab</option>
<option value="opel" disabled="disabled">Opel</option>
<option value="audi" disabled="disabled">Audi</option>
</select>
Se necessário, você sempre pode dar o select
a class
e estilize-o com CSS.Esta solução funcionará em todos os navegadores, independentemente dos recursos de script.
Outras dicas
Você poderia fazer isso com um onchange
evento?
<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">
Sua melhor aposta seria trocar as opções na caixa de seleção.Se você tiver apenas uma resposta nessa caixa, não importa se ela é clicável.
No entanto, eu tentaria encontrar outra maneira de fazer isso, pois parece que isso causaria frustração ao usuário.Imagine este cenário de usuário:
- "Olha, uma caixa de seleção de opções."
- clique
- "Hmm, por que isso não funcionou?"
- clique
- clique!
- “Essa coisa estúpida está quebrada, nunca mais voltarei aqui.”
Se você trocar o select por texto HTML, o mesmo objetivo será alcançado.Esta é uma tarefa bastante simples para a maioria das principais estruturas Javascript.
@Jack & @17 de 26, bom argumento, mas o usuário final espera que a caixa de seleção seja desativada para que a confusão não seja um problema.
Eu deveria ter sido mais claro sobre por que não poderia simplesmente desativar o controle.
O aplicativo que usará isso precisará desabilitar a seleção das opções e é necessário que o controle "bloqueado" ainda mantenha a aparência dos controles de formulário normais.
Experimente este gatilho.
<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>
Há uma nova adição recente ao CSS3 que é 95% compatível com todos os navegadores atuais, exceto Opera Mini, chamado pointer-events
.Simplificando, você pode "desabilitar" a ação padrão em um SELECT
ou qualquer outro elemento, e ainda poder realizar eventos específicos nele...
Você pode ver o artigo de Chris Coyier sobre eles em insira a descrição do link aqui.
Isso está mais próximo do que você está procurando ...Desculpe por não poder fornecer nenhum dos meus próprios exemplos de codificação ...