Eingabefeld für Eingabebeschriftung mit Eingabeaufforderungstextmethode

In diesem Artikel wird hauptsächlich das Eingabe-Tag zur Implementierung des Eingabefelds mit Aufforderungstext-Effekt vorgestellt (zwei Methoden, die es benötigen, ich hoffe, es kann jedem helfen).

Methode 1: HTML5 arbeitet mit CSS3 zusammen, um ein Eingabefeld mit Eingabeaufforderungstext zu implementieren (js entfernen);

Ein für Webkit einzigartiges CSS, das den Textstil im Inneren steuern kann Durch die Zusammenarbeit mit der Animation von CSS3-Effekten und Pseudoklassen können wir problemlos ein animiertes Eingabefeld erstellen, das sich sehr gut für die Systemanmeldung, Suche usw. eignet. Wenn Sie interessiert sind, können Sie sich auf diesen Artikel beziehen, der möglicherweise dazu in der Lage ist Um Ihnen zu helfen, wird Webkit als Träger für die Entwicklung des Systems verwendet. Natürlich ist es notwendig, in großem Umfang HTML5 und CSS3 zu verwenden, was nicht nur eine große Menge an JS reduziert, sondern auch einen reibungsloseren Ablauf gewährleistet.

Wenn das Dialogfeld ausgewählt ist, wird der Eingabeaufforderungstext heller und verschwindet nach der Eingabe. Die übliche Praxis besteht jetzt darin, nach der Eingabebezeichnung eine Beschriftung hinzuzufügen. Verwenden Sie die JS-Steuerung.

Mit der Einführung von HTML5 haben wir eine bessere Möglichkeit.

<input type="text" placeholder="用户名或邮件地址" name="username"/>

Achten Sie darauf, dass es ein Platzhalter-Tag gibt, das als Textaufforderung für den Benutzer verwendet werden kann. Das ist sehr praktisch. Um jedoch möglichst perfekt zu sein, müssen wir den Text heller machen oder den Stil der Eingabeaufforderungsdatei ändern, nachdem wir ihn ausgewählt haben.

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

-webkit-input-placeholder, ein für Webkit einzigartiges CSS, kann den darin enthaltenen Textstil steuern. Mit den Animationseffekten und Pseudoklassen von CSS3 können wir ganz einfach ein animiertes Eingabefeld erstellen eignet sich sehr gut für Systemanmeldung, Suche usw. Wenn Sie mit IE6 kompatibel sein möchten, funktioniert diese Methode natürlich nicht. Allerdings unterstützt Ie9 auch Platzhalter-Tags, deren Farbe jedoch nicht geändert werden kann.
Was soll ich also tun, wenn es nicht unterstützt wird? Sie können Jquery einfach direkt zur Hilfe verwenden, daher würde dies den Rahmen dieses Artikels sprengen.

Geben Sie mir eine Demo. Die Demo-Adresse muss in einem Webkit-Browser angezeigt werden, um den vollen Effekt zu sehen. Ist das nicht sehr praktisch?

Methode zwei: js-Steuerung;

Der Code ist wie folgt:

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  } 
  });
 })
 $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  }
  })
  }) 
 })
</script>

Der Effekt ist wie gezeigt; >

Beim Klicken verschwindet der Eingabeaufforderungstext. Wenn der Fokus verloren geht, wird der Eingabeaufforderungstext angezeigt. Nach der Eingabe von Inhalten wird der Eingabeaufforderungstext jedoch nicht angezeigt, wenn der Fokus verloren geht Der Wert des Kennwortfelds wird nicht angezeigt.

Methode 3: Direkt auf das Etikett schreiben (das ist praktischer)

Der Code lautet wie folgt:

Verwandte Empfehlungen:

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

Die perfekte Lösung für den Eingabeaufforderungstext im Textbereich in HTML, der Standardinhalte hinzufügen muss

JS-Methode zum Anzeigen von Textfeld-Eingabeaufforderungstext_Javascript-Fähigkeiten

jQuery-Plug-in EnPlaceholder implementiert Eingabefeld-Eingabeaufforderung text_jquery

Das obige ist der detaillierte Inhalt vonEingabefeld für Eingabebeschriftung mit Eingabeaufforderungstextmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!