Heim > Artikel > Web-Frontend > jQuery implementiert das IE-Eingabefeld, um die gemeinsame Nutzung von Platzhalter-Tag-Code abzuschließen

jQuery implementiert das IE-Eingabefeld, um die gemeinsame Nutzung von Platzhalter-Tag-Code abzuschließen

小云云Original: 2018-02-05 13:07:461065Durchsuche

In diesem Artikel wird hauptsächlich vorgestellt, wie jQuery die Platzhalter-Tag-Funktion des IE-Eingabefelds implementiert, einschließlich der jQuery-Ereignisantwort und der dynamischen Bedienung von Seitenelementattributen. Ich hoffe, es kann jedem helfen.

Wenn Sie dem Eingabefeld das Attribut placeholder="xx" hinzufügen, zum Beispiel:

<input type="text" placeholder="请输入关键词"/>

können Sie Durchsuchen auf Google Sie können die Funktion zum Ersetzen von Text im Eingabefeld eines erweiterten Browsers wie des Browsers implementieren, d. h. Sie erhalten das unten gezeigte Dialogfeld:

Aber dieses Attribut ist im Standardbrowser von WIN7 nicht verfügbar. Es ist nicht mit IE8 kompatibel, geschweige denn mit IE6. Mit anderen Worten: Das Platzhalter-Tag wird im IE nicht unterstützt.

Wenn Sie es nicht glauben, können Sie diesen Code abrufen und im IE8 ausführen und es ausprobieren. Sie erhalten lediglich ein leeres Dialogfeld.

Um dies im IE zu erreichen, müssen Sie es tun Verwenden Sie Komponenten, um die Fokusunschärfe zu verlieren und den Fokus zu erhalten. Weitere Informationen finden Sie unter „Methode zum Übergeben von Werten zwischen JavaScript-Komponentenfokus und In-Page-Ankerpunkt“

Tatsächlich können Sie auf jQuery verzichten Dies wird hier verwendet, um „jQuery-Steuerung durch Die Knotenimplementierung schließt die Parameterübertragung nur über die get-Methode im Vordergrund ab》

Die Idee ist sehr einfach. Zu Beginn ist dieses Textfeld standardmäßig auf # cccccc graue Schriftart und der Wert ist „Bitte geben Sie das Schlüsselwort ein“. Wenn es den Fokus erhält, wird es auf #000000 gesetzt. Der Wert ist leer Auf die standardmäßige graue Schriftart #cccccc zurückgesetzt. Der Wert lautet „Bitte geben Sie Schlüsselwörter ein“

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索输入框替换文本</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<form id="test">
  <input id="searchKeyword" type="text" maxlength="30" value="请输入关键词" style="color:#cccccc" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var isthisnull = true ;
  $("#searchKeyword").focus(function(){
    if ($(this).val() == "请输入关键词" && isthisnull) {
      $(this).val("");
      $(this).attr("style","color:#000000");
      isthisnull = false;
    }
  });
  $("#searchKeyword").blur(function(){
    if ($(this).val() == "") {
      $(this).val("请输入关键词");
      $(this).attr("style","color:#cccccc");
      isthisnull = true;
    }
  });
});
</script>

Beachten Sie Folgendes Ein boolescher Wert von isthisnull wird hinzugefügt, um zu bestimmen, ob er leer ist, um zu bestimmen, ob der Benutzer „Bitte geben Sie ein Schlüsselwort ein“ eingeben möchte.

Das können Sie nicht denken, wenn „Bitte geben Sie Schlüsselwörter ein“ in ist Das Textfeld ist leer. Was passiert, wenn der Benutzer selbst „Bitte Schlüsselwörter eingeben“ eingibt?

Sie sollten hier weder JQuery noch Javascript verwenden, um zu bestimmen, ob der Wert von Farbe oder Stil „#cccccc“ oder „color:#cccccc“ ist, da die Verwendung von $(this).css("color") zum Abrufen von Farben im Browser nicht funktioniert Die Ausgabeergebnisse sind unterschiedlich. Wenn Sie den Stil auswählen, geht der IE davon aus, dass es sich um ein Objekt und nicht um eine Zeichenfolge handelt.

Setzen Sie eine isthisnull, und Sie können sich auch auf die weitere Formularüberprüfung vorbereiten

Endlich , wird im IE der folgende Effekt erzielt:

Verwandte Empfehlungen:

Detaillierte Erklärung zur Verwendung des React Native-Platzhalters

JQuery-gekapselter Platzhalter-Beispielcode

Details zum HTML5-Platzhalterattribut

Das obige ist der detaillierte Inhalt vonjQuery implementiert das IE-Eingabefeld, um die gemeinsame Nutzung von Platzhalter-Tag-Code abzuschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel einer WeChat-Applet-Autorisierung zum Abrufen von BenutzerdatenNächster Artikel：Beispiel einer WeChat-Applet-Autorisierung zum Abrufen von Benutzerdaten

In Verbindung stehende Artikel

Mehr sehen