Prevent text highlight when click

Question

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

possible duplicate of [What is the best way to prevent highlighting of text when clicking on its containing div in javascript?](http://stackoverflow.com/questions/139157/what-is-the-best-way-to-prevent-highlighting-of-text-when-clicking-on-its-contai) — Felix Kling, Jul 12 '13 at 13:15
Note that your HTML is invalid. An anchor *must* have either a `name` or `href` attribute. You might want to use a simple `span` element. — Felix Kling, Jul 12 '13 at 13:16
@FelixKling, yes, I'm aware, just wanted to simplify. I have more properties in the inputs also. — Rikard, Jul 12 '13 at 13:17
If CSS3 is an option, you can use the ::selection selector to set the background color of selected text so that it's the same as the background color of the input — Jedediah, Jul 12 '13 at 13:19
@DevlshOne, buttons seems better markup, you are right. Will do your suggestion. — Rikard, Jul 12 '13 at 13:24

score 8 · Accepted Answer · answered Jul 12 '13 at 13:17

8

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/

answered Jul 12 '13 at 13:17

Juan Guerrero

613
4
8

that did it. Didn't know there were a CSS for that. Thanks. – Rikard Jul 12 '13 at 13:19
@Rikard Glad to be helpful! – Juan Guerrero Jul 12 '13 at 13:34

score 4 · Answer 2 · answered Jul 12 '13 at 13:20

4

you can use css ::selection

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

answered Jul 12 '13 at 13:20

barvaz

641
5
7

score 4 · Answer 3 · answered Jul 12 '13 at 13:29

4

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)

answered Jul 12 '13 at 13:29

Sergio

28,539
11
85
132

score 0 · Answer 4 · answered Jul 12 '13 at 13:21

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

Prevent text highlight when click

4 Answers4