Select (highlight) content of TextBox on click

react select all text in input
javascript on click select text
javascript select()
javascript select part of text in textarea
highlight text in textbox javascript
javascript highlight selected text
javascript select all text in div
select text input on click

Using the latest version of ASP.net MVC, I'm trying to attach an event listener to a TextBox to highlight the content of the TextBox when clicked.

I thought this simple JQuery would work:

@Html.TextBoxFor(t => t.item1, new { onclick= "$(this).blur();" })

But when I click on the TextBox, it just loses focus right away without leaving any errors in the browser's console.

I've also tried JQuery's onfocus and onmouseup events without success.

How can I highlight the content of the TextBox when it is clicked?

To select all the text in the selected textbox onclick,

this would be the code: @Html.TextBoxFor(t => t.item1, new { onclick= "$(this).select();" })

Highlight All Text by Clicking on Text Field or Textarea Box , Select All Text by Clicking on Text Field or Textarea Box. This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce  (Optional) Access the selected text through the SelectedText property. The code below selects the contents of a text box when the control's Enter event occurs. This example checks if the text box has a value for the Text property that is not null or an empty string. When the text box receives the focus, the current text in the text box is selected.

There is nothing wrong with your code. There is no problem with the actual behavior you are getting. Read the documentation jQuery Blur method documentation

Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

Now read the JavaScript blur event documentation

The onblur event occurs when an object loses focus.

So, basically, in your example you are saying that your component should lose focus when clicked, which is exactly what is happening

If what you want is to visually blur your element then you can try something like this

.blurred{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
div{
  width: 100px;
    height: 100px;
    background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- If what you want is to blur the element -->
<input type="text" value="click me to blur me" onclick="$(this).addClass('blurred')"/>

<hr/>

<!-- If what you want is to select all the content -->
<input type="text" value="click me to select all the data" onclick="$(this).select()"/>

How to Highlight a Text Box When Clicked Using Javascript, The onfocus event handler is mostly used with text boxes and select drop-down lists to highlight each option that a user is currently scrolling over to show  example: textbox1 has "0" as text, I want to click(it automatically highlights/selects all) and type 1, instead of having to click, delete the 0, and then type 1 ty vm for any help

As I understand "blur" in terms of u, is text color should be changed to light grey.

It can be done simply by :

@Html.TextBoxFor(t => t.item1, new { onclick= "$(this).css('color','#ddd');" })

HTMLInputElement.select(), Click the button in this example to select all the text in the <input> element. HTML​. <input type="text" id="text-box" size="20" value="Hello world! A common behavior in most Windows applications that users are accustomed to (often without realizing it), is that upon focus entering a textbox, the text is automatically selected. This makes it possible to click or tab in to a textbox and immediately start typing – and content will be automatically replaced.

HTMLInputElement.setSelectionRange(), Click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "Mozilla"). HTML. <input type="text" id  1. For a worksheet contains the textbox you will make its texts auto selected, please turn on the Design Mode by clicking Developer > Design Mode. See screenshot: Or you can also insert a textbox by clicking Developer > Insert > Text Box (ActiveX Control). See screenshot: 2. Right-click the textbox and click View Code from the context menu. See screenshot:

HTML DOM Input Text select() Method, The select() method is used to select the contents of a text field. Browser Support. Method. select(), Yes, Yes, Yes, Yes, Yes  Of course, you can also select the text in a textbox by calling its select function directly through client-side code. For instance, my blog entry Select a textbox's text on focus using jQuery shows how to write a bit of JavaScript so that a textbox's text is automatically selected whenever the textbox receives focus.

.select(), The select event is sent to an element when the user makes a text selection After this code executes, clicks on the Trigger button will also alert the In addition, the default select action on the field will be fired, so the entire text field will be  Well this is normal activity for a TextBox. Click 1 - Set focus. Click 2/3 (double click) - Select text. You could set focus on the TextBox when the page first loads to reduce the "select" to a single double-click event.

Comments
  • .blur is called when elements lose their focus so i think your code is creating an error by wrongly using methods
  • what you did is, onclick(this gives the element focus) $(this).blur() when the clicked object has no focus anymore do nothing, since you don't call a function inside your () from .blur()
  • Wait... blur or Highlight ? I want the text to be selected in blue
  • the text color of the selected text must be blue or the outline around the text should be blue?
  • Just when you slide mouse over text when holding mouse left button... So the text is ready to be copied
  • This is what I was looking for but I was too dumb to realize that Blur didn't mean Select
  • thanks for accepting my answer,im glad we found out you ment select and not blur ;)
  • At this point i don't know what to do... I was talking about select... not blur. My translation mistake.
  • Please, edit your question title to better reflect your problem