Выберите (выделить) содержимое TextBox по нажатию

Question

Используя последнюю версию ASP.net MVC, я пытаюсь прикрепить прослушиватель событий к TextBox, чтобы выделить содержимое TextBox при нажатии.

Я думал, что этот простой JQuery будет работать:

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

Но когда я нажимаю на TextBox, он сразу теряет фокус, не оставляя ошибок в консоли браузера.

Я также пробовал JQuery onfocus и onmouseupсобытия без успеха.

Как выделить содержимое TextBox при его нажатии?

Answer 1

Чтобы выделить весь текст в выбранном текстовом поле, нажмите

, это будет код: @Html.TextBoxFor(t => t.item1, new { onclick= "$(this).select();" })

Answer 2

В вашем коде нет ничего плохого.Нет проблем с реальным поведением, которое вы получаете.Прочитайте документацию Документация по методу jQuery Blur

Свяжите обработчик события с событием JavaScript "blur" или запустите это событие для элемента.

Теперь прочитайте документацию JavaScript размытие

Событие onblur наступает, когда объект теряет фокус.

Итак, в основном, в вашем примере выговорят, что ваш компонент должен потерять фокус при нажатии, что и происходит

Если вам нужно визуально размытие вашего элемента, то вы можете попробовать что-токак это

.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()"/>

Answer 3

Как я понимаю, «размытие» в терминах вас означает, что цвет текста должен быть изменен на светло-серый.

Это можно сделать просто:

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