2010-06-01 10 views
15

Sto cercando di impostare lo stato attivo su una casella di testo che viene generato nel seguente modo:Come faccio a impostare lo stato attivo a una casella di testo Html.TextBoxFor - MVC 2

<%=Html.TextBoxFor(model => model.Email, new { style = "width:190px;Border:0px", maxsize = 190 })%> 

ho cercato di usare javascript che non ha aiutato molto:

<script type="text/javascript"> 
     var txtBox = document.getElementById("Email"); 
     if (txtBox != null) txtBox.focus(); 
    </script> 

Come faccio a impostare lo stato attivo a una casella di testo Html.TextBoxFor MVC 2?

risposta

29

Dove stai scrivendo questo javascript? È necessario assicurarsi che il DOM è stato caricato:

window.onload = function() { 
    var txtBox = document.getElementById("Email"); 
    if (txtBox != null) { 
     txtBox.focus(); 
    } 
}; 

anche aiutanti HTML potrebbero generare un ID diverso a seconda del contesto: ad esempio, se si chiama il TextBoxFor all'interno di un editor di modelli.

Detto questo, non è la soluzione che raccomando. Per risolvere tutti quei problemi che di solito applicare una classe CSS per la casella di testo:

<%=Html.TextBoxFor(
    model => model.Email, 
    new { @class = "email", maxsize = "190" }) %> 

dove email classe è definita in questo modo:

.email { 
    width: 190px; 
    border: 0; 
} 

e quindi utilizzare un popular javascript framework per impostare la messa a fuoco quando il DOM è pronto:

$(function() { 
    $('input.email').focus(); 
}); 
+0

Quindi linea di fondo, dove metto quello script che imposta lo stato attivo – Shimmy

+0

Si può mettere in un file javascript che è dove gli script di solito vanno. Se questo script è incluso alla fine del DOM, non è più necessario racchiudere la chiamata di messa a fuoco in un gestore 'document.ready'. –

7

è possibile utilizzare l'autofocus in HTML5. <%=Html.TextBoxFor(model => model.Email, new { style = "width:190px;Border:0px", maxsize = 190 ,autofocus = "autofocus" })%>