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

Question

Как установить фокус на текстовое поле «Количество» при загрузке страницы для следующего кода 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>

Answer 1

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

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

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

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

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

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

Answer 2

с 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"})

Answer 3

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

<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/

Answer 4

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

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

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

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

Answer 5

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

<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>