CODEWITHSUNDEEP
javascript
Rikard
Rikard

Reputation: 7805

Prevent text highlight when click

I have a input field with plus minus sign to raise/lower the number in it. Looks like this:

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

How can I disable/prevent the select/highlight of the +/- text when I click to raise the numbers?

I'm looking for a solution that works cross browser. Thanks

Upvotes: 5

Views: 8405

Answers (4)

Sergio
Sergio

Reputation: 28837

The best practice is to have <button> doing that.
Then both your highlight problem is solved and you write code in a better way.

(you can also change buttons with CSS so they look like you want)

Upvotes: 4

tomdemuyt
tomdemuyt

Reputation: 4592

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

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

Upvotes: 0

barvaz
barvaz

Reputation: 641

you can use css ::selection

::selection {
  background: none;
}
::-moz-selection {
  background: none;
}
::-webkit-selection {
  background: none;
}

Upvotes: 4

Juan Guerrero
Juan Guerrero

Reputation: 613

Depending of what versions of browsers you have to support, you can try using css property user-select to none. Here you have an example of such implementation http://css-tricks.com/almanac/properties/u/user-select/

Upvotes: 8

Related Questions