Установите фокус на текстовое поле - MVC3

Как настроить фокус на текстовое поле "Сумма" на загрузку страницы для следующего кода Razor в MVC3?

        <tr>
            <th>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Amount)
                </div>                            
            </th>
             <td>
                 <div class="editor-field">
                    @Html.EditorFor(model => model.Amount)
                    @Html.ValidationMessageFor(model => model.Amount)
                 </div>                          
            </td>
        </tr>

Ответы

Ответ 1

Вы можете предоставить дополнительный класс для содержащего div:

<div class="editor-field focus">
    @Html.EditorFor(model => model.Amount)
    @Html.ValidationMessageFor(model => model.Amount)
</div>

а затем вы можете использовать селектор класса jQuery:

$(function() {
    $('.focus :input').focus();
});

Это говорит о том, что у вас, кажется, несколько таблиц Amount texboxes в таблице, и, очевидно, только один может иметь фокус за раз. Поэтому, предполагая, что вы хотите, чтобы это было первым, вы можете сделать это:

$('.focus :input:first').focus();

Ответ 2

Откройте файл /Views/Shared/Site.Master и введите следующее после того, как jquery script включите этот script:

<script type="text/javascript">
    $(function () {
        $("input[type=text]").first().focus();
    });
</script>

Это установит фокус на первое текстовое поле на каждую форму приложения без написания дополнительного кода!

взято из http://www.tcscblog.com/2011/03/24/setting-default-focus-in-mvc-applications-with-jquery/

Ответ 3

с браузером, совместимым с html 5, вы устанавливаете автофокус

<input type="text" autofocus="autofocus" />

если вам нужна поддержка IE, вам нужно сделать это с помощью javascript

 <input type="text" id=-"mytextbox"/>
  <script type="text/javascript">document.getElementById('mytextbox').focus();</script>

в бритве:

@Html.EditorFor(model => model.Amount,new{@autofocus="autofocus"})

Ответ 4

Фокус в том, что эти элементы ввода всегда имеют атрибут id, который вы можете получить в виде строки с Html.IdFor. Таким образом, вы можете сфокусировать тот, который вы хотите, с помощью Javascript:

document.getElementById("@Html.IdFor(model => model.Amount)").focus();

Или, если вы предпочитаете jQuery:

$("#" + "@Html.IdFor(model => model.Amount)").focus();

Ответ 5

Я использую MVC4/Razor и не имею файл Site.Master в моем проекте. Однако у меня есть файл _Layout.cshtml, который применяется к каждой странице (Views/Shared/_Layout. cshtml), поэтому я добавил это в существующий script в этом файле следующим образом. Это хорошо работает для меня.

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
            // ajaxSetup code here...
            }
        });
        // Set the focus to the first textbox on every form in the app
        $("input[type=text]").first().focus();
    });
</script>