8.9 TextBox
 
| Klasse
|
System.Web.UI.WebControls.TextBox
|
| Deklaration
|
<asp:TextBox id="value"
AutoPostBack="True|False"
Columns="Anzahl Spalten"
MaxLength="characters"
Rows="Anzahl Zeilen"
Text="text"
TextMode=
"SingleLine | MultiLine | Password"
Wrap="True|False"
OnTextChanged="OnTextChanged-Methode"
runat="server"/>
|
| Erzeugter HTML-Code
|
Abhängig vom Parameter TextMode:
<input type="text" size="..." ...> oder
<input type="password" size="..." ...> oder
<textarea rows="..." cols="..."> ... </textarea>
|
| Kurzcharakteristik
|
Das TextBox-Webserversteuerelement kann einzeilige und mehrzeilige Texteingabefelder sowie Passwortfelder erzeugen.
|
Das TextBox-Steuerelement fasst die Funktionalität von drei HTML-Eingabefeldern zusammen. Es kann
|
einzeilige Texteingabefelder (input type="text" ...), |
|
|
Passwortfelder (input type="password" ...) und |
|
|
textarea-Elemente |
erzeugen. Über das Attribut TextMode geben Sie den gewünschten Typ des Eingabefelds an. Zur Definition der Breite verwenden Sie das Attribut Columns. Mit MaxLength können Sie die Eingabe auf eine maximal zulässige Anzahl von Zeichen beschränken. Bei mehrzeiligen Eingabefeldern legen Sie mit dem Attribut Wrap fest, ob der Text bei der Eingabe auf die nächste Zeile umbrechen oder ob die Zeile weitergeführt werden soll. Horizontale Scroll-Balken ermöglichen in diesem Fall den Zugriff auf die verdeckten Teile.
Das TextBox-Steuerelement ist eines derjenigen Webserversteuerelemente, die das AutoPostBack-Feature unterstützen. Wenn der Anwender Text in eine TextBox mit aktiviertem AutoPostBack eingibt und anschließend das Feld verlässt, etwa durch Drücken der Tabulator- oder Enter-Taste, wird das Formular automatisch zum Server gesandt. Dieses Feature ist immer dann sinnvoll, wenn nach einer Eingabe das Formular ohnehin zum Server gesandt werden soll. Auf diese Weise ersparen Sie dem Anwender den Klick auf den OK-Button.
| Achtung Das AutoPostBack-Feature wird im Browser über eine JavaScript-Routine realisiert. Bei deaktiviertem JavaScript kann es nicht funktionieren. Daher sollten Sie stets auch einen OK-Button zur Verfügung stellen. Bei deaktiviertem JavaScript wäre die Verwendung des Formulars sonst unmöglich.
|
Das folgende Formular enthält ein einzeiliges Eingabefeld für den Anwendernamen, ein Passwortfeld und ein mehrzeiliges Feld für einen Kommentar. Das AutoPostBack-Feature wurde bei allen drei Eingabefeldern aktiviert. Das ergibt in diesem Zusammenhang keinen tieferen Sinn, verdeutlicht aber beim Testen die Funktionsweise. Abbildung 8.5 zeigt die Darstellung im Browser.
<!-- webserver_textbox01.aspx -->
<%@ Page Language="VB" debug="True" Strict="True" %>
<script runat="server">
Sub Page_Load (Sender As Object, E As EventArgs)
ausgabe.text = ""
ausgabe.text &= "Name: " & textEinzeilig.text
ausgabe.text &= "<br>"
ausgabe.text &= "Passwort: " & textPasswort.text
ausgabe.text &= "<br>"
ausgabe.text &= "Kommentar: " & textMehrzeilig.text
End Sub
</script>
<html><head>
<title>Webserversteuerelemente: TextBox</title>
</head>
<body>
<h3>Webserversteuerelemente: TextBox</h3>
<form runat="server" id="myForm">
Ihr Name<br>
<asp:TextBox id="textEinzeilig"
Columns="40"
MaxLength="40"
Rows="1"
TextMode="SingleLine"
runat="server"
AutoPostBack="True"/><br>
Ihr Passwort<br>
<asp:TextBox id="textPasswort"
Columns="40"
MaxLength="40"
Rows="1"
TextMode="Password"
runat="server"
AutoPostBack="True"/><br>
Ihr Kommentar<br>
<asp:TextBox id="textMehrzeilig"
Columns="40"
Rows="5"
TextMode="Multiline"
Wrap="True"
runat="server"
AutoPostBack="True"/>
<br>
<asp:Button
id="btnSubmit"
runat="server"
Text =" OK "/>
<p>
<asp:Label
id="ausgabe"
Text =""
runat="server"/>
</p>
</form></body></html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 8.5 Durch das automatische Postback erhält jeweils stets die OK-Schaltfläche den Fokus.
Nach der Eingabe von Text versenden alle drei Eingabefelder automatisch das Formular. Bei jedem Laden der Seite schreibt die Prozedur Page_Load die aktuellen Inhalte der drei Eingabefelder in ein Label-Feld hinter das Formular.
Das AutoPostBack-Feature funktioniert beim Testen des Beispiels wunschgemäß. Bei der Eingabe des Passwortes fällt das besondere Verhalten des Passwortfelds auf. Beim automatischen Formularversand bleibt der Inhalt des Passwortfelds nicht erhalten, sondern wird aus dem Feld gelöscht. Auf diese Weise soll ein Missbrauch verhindert werden. Beim übernächsten PostBack verschwindet dabei natürlich auch wieder das Passwort aus dem Label-Feld, weil im Passwortfeld nichts mehr drinsteht.
Unangenehm fällt aber auf, dass nach dem automatischen Versand stets der OK-Button den Fokus bekommt und nicht das jeweils nächste Eingabefeld, in das der Anwender die folgende Eingabe machen möchte. Dieses Verhalten resultiert aus der clientseitigen JavaScript-Routine. Offenkundig bewirkt ein submit stets gleichzeitig, dass auch der Submit-Button den Fokus erhält.
Dieser Nebeneffekt der AutoPostBack-Funktion ist jedoch wenig anwenderfreundlich. Es stellt sich die Frage, ob und wie man den Cursor jeweils in das richtige Feld stellen kann. Beim Durchsehen der Dokumentation stellt man aber fest, dass das TextBox-Steuerelement keine Methode zur Fokus-Steuerung anbietet. Auch die grundlegende Klasse System.Web.UI.Control hat keine Fokus-bezogenen Merkmale im Gepäck.
| Achtung Dies ist einer der zahlreichen Unterschiede zu den Klassen von Windows.Forms. Die Basisklasse System.Windows.Forms.Control beispielsweise bietet bereits alle Eigenschaften und Methoden, um den Fokus von Steuerelementen beeinflussen zu können. Bei der ASP.NET-Programmierung müssen Sie auf dieses nützliche Feature entweder verzichten oder eben selbst zur Tastatur greifen und das gewünschte Verhalten mit Hilfe von selbst geschriebenem JavaScript-Code ergänzen.
|
8.9.1 Mit JavaScript den Fokus setzen
Als kleinen Exkurs habe ich das einmal umgesetzt und bin zu folgendem Ergebnis gekommen:
<!-- webserver_textbox02.aspx -->
<%@ Page Language="VB" debug="True" Strict="True" %>
<script runat="server">
Dim min As Integer = 1
Dim max As Integer = 4
Dim neu as Short = 1
Sub Page_Load (Sender As Object, E As EventArgs)
ausgabe.text = ""
ausgabe.text &= "Name: " & textEinzeilig.text
ausgabe.text &= "<br>"
ausgabe.text &= "Passwort: " & textPasswort.text
ausgabe.text &= "<br>"
ausgabe.text &= "Kommentar: " & textMehrzeilig.text
End Sub
Sub changing (sender As Object, e As EventArgs)
Dim tb as New TextBox()
tb = CType (sender, TextBox)
neu = tb.TabIndex + CType(1, Short)
End Sub
</script>
<script language="JavaScript" type="text/javascript">
<!--
function setzeFokus (inZiel) {
switch (inZiel) {
case 1:
document.myForm.textEinzeilig.focus();
break;
case 2:
document.myForm.textPasswort.focus();
break;
case 3:
document.myForm.textMehrzeilig.focus();
break;
case 4:
document.myForm.ausgabe.focus();
break;
}
}
//-->
</script>
<html><head>
<title>Webserversteuerelemente: TextBox</title>
</head>
<body onLoad="setzeFokus(<% = neu %>)">
<h3>Webserversteuerelemente: TextBox</h3>
<form runat="server" id="myForm">
Ihr Name<br>
<asp:TextBox id="textEinzeilig"
Columns="40"
MaxLength="40"
Rows="1"
TextMode="SingleLine"
OnTextChanged="changing"
runat="server"
AutoPostBack="True"
TabIndex="1"/><br>
Ihr Passwort<br>
<asp:TextBox id="textPasswort"
Columns="40"
MaxLength="40"
Rows="1"
TextMode="Password"
OnTextChanged="changing"
runat="server"
AutoPostBack="True"
TabIndex="2"/><br>
Ihr Kommentar<br>
<asp:TextBox id="textMehrzeilig"
Columns="40"
Rows="5"
TextMode="Multiline"
Wrap="True"
OnTextChanged="changing"
runat="server"
AutoPostBack="True"
TabIndex="3"/>
<br>
<asp:Button
id="btnSubmit"
runat="server"
Text ="OK"
TabIndex="4"/>
<p>
<asp:Label
id="ausgabe"
Text =""
runat="server"/>
</p>
</form></body></html>
Wenn diese Seite im Browser geladen wird, wird über das onLoad-Attribut im Body-Element die JavaScript-Funktion setzeFokus aufgerufen. Dabei erhält diese Funktion einen Parameter, der jeweils dafür sorgt, dass genau das richtige Steuerelement den Fokus bekommt. Dieser Wert wird über den klassischen Inline-Code eingefügt:
<body onLoad="setzeFokus(<% = neu %>)">
ASP.NET hat seinerseits dafür gesorgt, dass die Variable neu den richtigen Wert enthält, und das kommt so:
Beim ersten Aufruf der Seite bekommt die Variable neu den Wert 1 zugewiesen.
Bei einem Postback wird die serverseitige Prozedur changing aufgerufen. Dafür sorgt bei den asp:TextBox-Elementen jeweils das Attribut OnTextChanged="changing". Die Prozedur changing ermittelt den Wert des Attributs TabIndex, über den dasjenige Steuerelement verfügt, das den Aufruf von changing veranlasst hat, erhöht diesen Wert um 1 und weist der Variablen neu den erhöhten Wert zu.
changing kennt mit sender zunächst nur eine Variable vom Typ Object. Da sichergestellt ist, dass die Prozedur stets von einem TextBox-Element aufgerufen wird, kann problemlos die Konvertierung in ein TextBox-Objekt erfolgen:
tb = CType (sender, TextBox)
Mit tb.TabIndex kann der Wert des TabIndex-Attributs abgerufen werden. Die Erhöhung um 1 erfordert einen auf den ersten Blick ungewöhnlichen Aufwand:
neu = tb.TabIndex + CType(1, Short)
Der Ausdruck CType(1, Short) stellt die Zahl 1 in eine Short-Darstellung um. Zahlen, die als Literal angegeben werden, sind unter .NET per definitionem vom Typ Integer. Da aber in der Page-Direktive das Attribut Strict="True" angegeben ist, dürfen bei impliziten Typkonvertierungen keine Typeinengungen stattfinden. Genau das wäre aber der Fall, wenn man beispielsweise neu = tb.TabIndex + 1 schreiben würde, denn neu ist vom Typ Short und das Literal 1 wäre vom Typ Integer. Also muss ausdrücklich konvertiert werden. Und warum ist neu vom Typ Short? Weil die Eigenschaft TabIndex von diesem Typ ist.
Im Prinzip wird hier also mit der serverseitigen Programmierung der clientseitige Code beeinflusst.
|
