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

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

Share Improve this question edited Jul 12, 2013 at 13:20 asked Jul 12, 2013 at 13:14 Rikard 7,80513 gold badges60 silver badges99 bronze badges

1 possible duplicate of What is the best way to prevent highlighting of text when clicking on its containing div in javascript? – Felix Kling Commented Jul 12, 2013 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 Commented Jul 12, 2013 at 13:16
2 Make them buttons instead of text links. – DevlshOne Commented Jul 12, 2013 at 13:16
@FelixKling, yes, I'm aware, just wanted to simplify. I have more properties in the inputs also. – Rikard Commented Jul 12, 2013 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 Commented Jul 12, 2013 at 13:19

| Show 1 more comment

4 Answers 4

Sorted by: Reset to default 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/

you can use css ::selection

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

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)

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Prevent text highlight when click - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)