web-dev-qa-db-fra.com

Mettre l'accent sur une zone de texte - MVC3

Comment puis-je mettre l'accent sur la zone de texte "Montant" au 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>
asp.net-mvcasp.net-mvc-3razor
38
rk1962

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

<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 texboxes dans une table et, évidemment, une seule peut avoir le focus à la fois. Donc, en supposant que vous vouliez que ce soit le premier, vous pouvez le faire:

$('.focus :input:first').focus();
51
Darin Dimitrov

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

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

si vous avez besoin de IE support 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"})
39
MaTya

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

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

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

extrait de http://www.tcscblog.com/2011/03/24/setting-default-focus-in-mvc-applications-with-jquery/

35
kaspur

L'astuce est que ces éléments d'entrée ont toujours un attribut id, que vous pouvez obtenir sous forme de chaîne avec Html.IdFor. Vous pouvez donc concentrer 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();
5
Jon

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