jQuery は IE 入力ボックスを実装して、プレースホルダータグのコード共有を完了します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery は IE 入力ボックスを実装して、プレースホルダータグのコード共有を完了します

小云云

Feb 05, 2018 pm 01:07 PM

ie jquery placeholder

この記事では、jQuery が IE 入力ボックスのプレースホルダータグ機能を実装する方法を主に紹介し、jQuery のイベントレスポンスとページ要素の属性の動的操作について説明します。必要な方は参考にしていただければ幸いです。

入力ボックスに placeholder="xx" 属性を追加すると (例:

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

ログイン後にコピー

)、Google Chrome などの高度なブラウザの入力ボックスにテキスト置換機能を実装できます。、次の図が表示されます。ダイアログボックスが表示されます:

ただし、この属性は、IE6 はおろか、WIN7 のデフォルトのブラウザである IE8 とも互換性がありません。つまり、プレースホルダータグは IE ではサポートされていません。

信じられない場合は、このコードをプルして IE8 で実行して試してみると、空のダイアログボックスが表示されるだけです

IE でこれを実現するには、コンポーネントを使用してフォーカスを失ったりぼかしたりする必要があります。詳細については、「JavaScriptコンポーネントのフォーカスとページ上のアンカーポイントの間で値を転送する方法」を参照してください

実際には、jQueryはまったく使用できません。コントロールノードを介してgetメソッドを介してフォアグラウンドでのみパラメータ転送を実現します。

考え方は非常にシンプルです。最初は、このテキストボックスのデフォルトは#cccccc灰色のフォントで、値は「キーワードを入力してください」です。フォーカスを失うと、その色を #000000 黒に設定し、値は空になります。値が空の場合は、すぐにデフォルトの #cccccc 灰色のフォントに戻ります。値は「キーワードを入力してください」です

コードは次のとおりです:

<!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>

ログイン後にコピー

ここで、空であるかどうかを判断するために isthisnull のブール値が追加されていることに注意してください。これは、ユーザーが「キーワードを入力してください」と入力したいかどうかを判断するためです

それは考えられません。テキストボックスに「キーワードを入力してください」と表示されている場合は、空であることを意味します。ユーザーが自分で「キーワードを入力してください」と入力した場合はどうなるでしょうか。

ここでは、color または style の値が "#cccccc" か "color:#cccccc" かを判断するために jquery や javascript を使用しないでください。これは、$(this).css("color") を使用して色を取得すると、出力結果が色やスタイルに応じて異なるためです。はい、スタイルを選択すると、IE はこれが文字列ではなくオブジェクトであると認識します。また、isthisnull を設定すると、IE で次のような効果が得られます。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイックスタートガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Mar 20, 2024 pm 09:21 PM

最近、多くの win10 ユーザーが、コンピューターのブラウザーを使用するときに、IE ブラウザーが常に自動的にエッジブラウザーにジャンプすることに気付きました。このサイトでは、win10でIEを開いたときに自動的にエッジにジャンプして閉じる方法をユーザーに丁寧に紹介しましょう。 1. Edge ブラウザにログインし、右上隅にある [...] をクリックして、ドロップダウン設定オプションを探します。 2. 設定を入力したら、左側の列の「デフォルトのブラウザ」をクリックします。 3. 最後に、互換性で、Web サイトが IE モードで再ロードされないようにチェックボックスをオンにし、IE ブラウザを再起動します。

jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

See all articles

jQuery は IE 入力ボックスを実装して、プレースホルダー タグのコード共有を完了します