2013-07-12 3 views
2

J'ai un champ de saisie avec le signe plus moins pour augmenter/diminuer le nombre. On dirait ceci:Empêche la surbrillance du texte lorsque vous cliquez sur

<a onclick="less()">-</a> 
<input type="text" text-input"> 
<a onclick="more()">+</a> 

Comment puis-je désactiver/empêcher la sélection/highlight du texte +/- quand je clique pour augmenter les chiffres?

Je suis à la recherche d'une solution qui fonctionne à travers le navigateur. Merci

+1

double possible de [Quelle est la meilleure façon de prévenir le surlignement de textes en cliquant sur son contenant div en javascript?] (Http://stackoverflow.com/questions/139157/what-is-the-best-way-to-prevent-highlighting-of-text-whicking-on-its-contai) –

+0

Notez que votre code HTML n'est pas valide. Une ancre * doit * avoir un attribut 'name' ou' href'. Vous pourriez vouloir utiliser un simple élément 'span'. –

+1

Faites-les boutons à la place des liens de texte. – DevlshOne

Répondre

3

Selon les versions de navigateurs que vous devez prendre en charge, vous pouvez essayer d'utiliser la propriété css user-select à none. Ici vous avez un exemple d'une telle mise en œuvre http://css-tricks.com/almanac/properties/u/user-select/

+0

qui l'a fait. Je ne savais pas qu'il y avait un CSS pour cela. Merci. – Rikard

+0

@Rikard Heureux d'être utile! –

1

vous pouvez utiliser css ::selection

::selection { 
    background: none; 
} 
::-moz-selection { 
    background: none; 
} 
::-webkit-selection { 
    background: none; 
} 
0
<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <style> 
     .linklike { color: blue; text-decoration:underline }   
    </style> 
    </head> 

    <body> 
    <button onclick="less()">-</button> 
    <input type="text"> 
    <button onclick="more()">+</button> 
    <br> 
    <br> 
    OR<br 
    <br> 
    <br> 
    <span onclick="less()" class="linklike">-</span> 
    <input type="text"> 
    <span onclick="more()" class="linklike">+</span>  


    </body> 

</html> 

plnkr rapide: http://plnkr.co/edit/u7dKekjLg6DpyUjz1a06?p=preview

2

La meilleure pratique est d'avoir <button> faire.
Ensuite, votre problème de surbrillance est résolu et vous écrivez mieux le code.

(vous pouvez également modifier les boutons CSS afin qu'ils ressemblent à vous voulez)

Questions connexes