Wulin.com (www.vevb.com) Introducción al artículo: Varios estilos de cuadros de entrada de entrada.
El fondo del marco de entrada es transparente:
<input style = fondo: transparente; borde: 1px sólido #ffffff>
El mouse pasa a través del cuadro de entrada y el color de fondo del cuadro de entrada cambia:
<Input value = type aquí name = user_pass type = text size = 29 onMouseOver = this.Style.BorderColor = 'Black'; this.Style.BackgroundColor = 'Plum'
estilo = ancho: 106; Altura: 21
onMouseOut = this.style.borderColor = 'Black'; this.style.backgroundcolor = '#ffffff' style = border-width: 1px; border-color = black>
Al ingresar a una palabra, el borde del cuadro de entrada parpadea (el borde es pequeño cuadrado):
<Script Language = JavaScript>
function borderColor () {
if (self ['oText']. style.borderColor == 'rojo') {
self ['oText']. style.borderColor = 'Yellow';
}demás{
self ['oText']. style.bordercolor = 'rojo';
}
otime = setTimeOut ('borderColor ()', 400);
}
</script>
<Input type = text id = oText style = border: 5px punteado rojo; color: rojo onfocus = borderColor (esto); onblur = cleartimeout (oTime);>
Al ingresar una palabra, el borde del cuadro de entrada parpadea (el borde es una línea punteada):
<estilo>
#otext {border: 1px punteado #ff0000; ryo: expresion (onfocus = function light () {con (document.all.otext) {style.borderColor = (style.borderColor ==#ffee00?#ff0000:#ffee00); timer = setTimeOut (light, 500);}}, onblur = function () {this.Style.BORDERCOLOR =#fff0000; ClearMeout (tiempo temporal)})};
</style>
<Input type = text id = oText>
Cuadro de entrada de extensión horizontal automática:
<input type = text style = Huerreson: Expression (this.width = this.scrollwidth) valor = abcdefghijk>
Extender automáticamente el cuadro de texto hacia abajo:
<TextArea name = Content filas = 6 cols = 80 onPropertyChange = if (this.scrollheight> 80) this.style.posheight = this.scrollheight+5> intente ingresar algunas entradas </extarea>
Solo cuadros de texto subrayados:
<Input Style = Border: 0; Border-Bottom: 1 Negro sólido; fondo:;>
Cuadro de entrada de número de serie de software:
<script for = t event = onKeyUp>
if (value.length == 3) document.all [event.srcelement.sourceIndex+1] .select ();
</script>
<input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLengment = 3> - <name de entrada = t7 size = 5 maxLengment = 3>
Cuadro de entrada de número de serie de software (versión completa):
<script for = t event = onKeyUp> if (value.length == maxLength) document.all [Event.SrCelement.SourceIndex+1] .focus (); </script>
<script for = t event = onfocus> select (); </script>
<script for = enviar event = onClick>
var sn = new Array ();
para (i = 0; i <t.length; i ++)
sn = t.value;
alerta (sn.join ( -));
</script>
<input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxlength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - - <input name = t size = 5 maxLengment = 3> - <input name = t size = 5 maxLengment = 3>
<input type = enviar nombre = enviar>