Disable auto text highlight input?

Question

I have this https://codepen.io/anon/pen/RgQOWz

Put any value and when clicking the decrease/decrement repeatedly the input box text will highlight which is not what I want to happen.

I tried user-select: none but still doesn't take any effect.

 $(".increment").click(function() {
   var score1 = $(".score").val();
   score1++;
   $(".score").val(score1);
 });

 $(".decrement").click(function() {
   var score1 = $(".score").val();
   if (score1 == 0) {} else {
     score1--;
     $(".score").val(score1);
   }
 });

 $(function() {
   $('input').bind('focus', false);
 });

body {
  margin: 20px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prdin {
  text-align: center;
  background: #f5f5f5;
  width: 40px;
  border: 1px solid #ccc;
  border-top: 0px;
  margin: 20px;
}

.prdin div {
  display: flex;
  height: 37px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ccc;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none -ms-user-select: none;
  user-select: none;
}

.prdin input {
  text-align: center;
  border: 0px;
  height: 100%;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- For icon styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet" />

<div class="prdin">
  <div class="increment">
    <i class="icon-arrow-up icons"></i>
  </div>
  <div id="input1">
    <input type="number" class="score" value="0">
  </div>
  <div class="decrement">
    <i class="icon-arrow-down icons"></i>
  </div>
</div>

<div class="prdin">
  <div class="increment">
    <i class="icon-arrow-up icons"></i>
  </div>
  <div id="input1">
    <input type="number" class="score" value="0">
  </div>
  <div class="decrement">
    <i class="icon-arrow-down icons"></i>
  </div>
</div>

Michael Coker · Accepted Answer · 2017-06-30 15:35:24Z

4

You can use user-select: none; on the divs to disable the selection/highlighting.

$(".increment").click(function() {
  var score1 = $(".score").val();
  score1++;
  $(".score").val(score1);
});

$(".decrement").click(function() {
  var score1 = $(".score").val();
  if (score1 == 0) {
  } else {
    score1--;
    $(".score").val(score1);
  }
});

$(function() {
  $("input").bind("focus", false);
});

body {
  margin: 20px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prdin {
  text-align: center;
  background: #f5f5f5;
  width: 40px;
  border: 1px solid #ccc;
  border-top: 0px;
  margin: 20px;
}

.prdin div {
  display: flex;
  height: 37px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ccc;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.prdin input {
  text-align: center;
  border: 0px;
  height: 100%;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdin">
  <div class="increment">
    <i class="icon-arrow-up icons"></i>
  </div>
  <div id="input1">
    <input type="number" class="score" value="0">
  </div>
  <div class="decrement">
    <i class="icon-arrow-down icons"></i>
  </div>
</div>

answered Jun 30, 2017 at 15:35

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7716943 Over a year ago

Thanks - I will accept when stackoverflow let me does.

Fahmi Over a year ago

Cool. Just beware of the browser support

clodal · Accepted Answer · 2017-06-30 15:37:56Z

0

If you prefer a CSS approach, add vendor prefixes to user-select: none. You can also add outline:none on :focus to make if you like. Demo on codepen

answered Jun 30, 2017 at 15:37

clodal

1,84523 silver badges36 bronze badges

1 Comment

Fahmi Over a year ago

I think you misunderstood the problem

Collectives™ on Stack Overflow

Disable auto text highlight input?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related