Définir le focus sur une zone de texte - MVC3

Question

Comment puis-je définir le focus sur la zone de texte « Amount » lors du chargement de la page pour le code Razor suivant dans 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

Vous pouvez fournir une classe supplémentaire au div conteneur :

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

puis vous pouvez utiliser un sélecteur de classe jQuery :

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

Cela étant dit, vous semblez avoir plusieurs Amount dans une table et, de toute évidence, une seule peut avoir le focus à la fois. Donc, en supposant que vous vouliez que ce soit le premier, vous pouvez faire ceci :

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

Answer 2

avec un navigateur compatible html 5, vous définissez l'autofocus

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

si vous avez besoin du support IE, vous devez le faire avec javascript

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

au rasoir :

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

Answer 3

Ouvrez le fichier /Views/Shared/Site.Master et entrez ce qui suit après que le script jquery inclue ce script :

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

Cela mettra le focus sur la première zone de texte sur chaque formulaire de l'application sans écrire de code supplémentaire !

Answer 4

L'astuce est que ces éléments d'entrée ont toujours un id , que vous pouvez obtenir sous forme de chaîne avec Html.IdFor . Vous pouvez donc focaliser celui que vous voulez avec Javascript :

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

Ou, si vous préférez jQuery :

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

Answer 5

J'utilise MVC4/Razor et je n'ai pas de fichier Site.Master dans mon projet. Cependant, j'ai un fichier _Layout.cshtml qui est appliqué à chaque page (Views/Shared/_Layout.cshtml), J'ai donc ajouté ceci à un script existant dans ce fichier, comme suit. Cela fonctionne bien pour moi.

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