How to Deselect selected input?

Question

I have

<input type="text" id="first">

and have

 $('#first').select();

So, in some case I want to deselect the input, something like

$('#first').deselect();

Can you provide the code how to deselect selected input? But that is not focus, I am not talking about selecting input itself, but selecting the text in it. Like you double click on text. Thanks.

please try the reset value something like $('#first').val(null) — rk_programmer, Feb 01 '19 at 13:20
Guys, not blur, because I am not focusing it, but selecting the text. Like double clicking the text. When you double click text in input, you select the text, thats what i mean. No not select tag but input. — KoboldMines, Feb 01 '19 at 13:22
https://jsfiddle.net/nkbjvqwu/ ---- Blur is working fine.... — Roy Bogado, Feb 01 '19 at 13:22
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange — Nir Berko, Feb 01 '19 at 13:23
`.blur()` should defocus from the input and only unselect the selected text. — Terry, Feb 01 '19 at 13:24
Possible duplicate of [Unselect what was selected in an input with .select()](https://stackoverflow.com/questions/5861312/unselect-what-was-selected-in-an-input-with-select) — DaFois, Feb 01 '19 at 13:26
Yes, blur is the correct answer, like in jsfiddle provided. But that's not working in my case. Okay, then I must search the bug in my code. Thanks everyone. — KoboldMines, Feb 01 '19 at 13:27

score 6 · Answer 1 · answered Feb 01 '19 at 13:26

Based on jQuerys API documentation, .select() is simply a helper function that performs focusing and selection of the text node:

In addition, the default select action on the field will be fired, so the entire text field will be selected.

So, if you want the opposite, calling .blur() will have the opposite effect. It will defocus from the field and also reset the selection. See proof-of-concept below:

$('#select').on('click', function() {
  $('#first').select();
});

$('#deselect').on('click', function() {
  $('#first').blur();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="first" value="Lorem ipsum">
<button type="button" id="select">Select</button>
<button type="button" id="deselect">Deselect</button>

score 1 · Answer 2 · answered Feb 01 '19 at 13:25

1

You can use:

$('input').blur();

answered Feb 01 '19 at 13:25

Marcos Pinho

45
9

score 1 · Answer 3 · answered Mar 19 '22 at 15:56

You can simply use two methods

input.blur();
input.selectionStart = input.selectionEnd;

let input = document.querySelector("input");

const select = ()=> {
  input.select();
}

const unSelect = ()=> {
  // Using blur()
  // input.blur();
  
  // or using this
   input.selectionStart = input.selectionEnd;
}

<input type="text" value="Select or unselect input value">
<button onclick="select()">Select Text</button>
<button onclick="unSelect()">UnSelect Text</button>

How to Deselect selected input?

3 Answers3