HTML でテキスト ボックスのプロンプト機能を実装するさまざまな方法

HTML でテキスト ボックスのプロンプト機能を実装するさまざまな方法
HTML5の<input="text" placeholder="入力したい内容" >属性を使用できます。

jsを使用してcssスタイルを追加することもできます

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css">
.in_search {
境界線:1 なし;
色:#999999;
フロート:左;
フォントサイズ:14px;
高さ:18px;
行の高さ:18px;
マージン:3px 2px;
幅:253px;
}
</スタイル>
<input name="q" class="in_search" onfocus="if(this.value=='入力したい内容を入力してください'){this.value='';}" onblur="if(this.value==''){this.value='入力したい内容を入力してください';}" type="text" value="入力したい内容を入力してください"/>

<<:  JavaScriptはスタック構造の詳細なプロセスを実装する

>>:  Flexレイアウトを使用してdiv内のサブ要素を垂直方向に中央揃えする例

推薦する

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

Docker で Confluence をデプロイする

1. 環境要件1. Docker 17以上がインストールされている2. コンテナ操作docker r...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

Mysql5.7.14 インストールと設定方法操作グラフィックチュートリアル(パスワード問題解決)

この記事は主に、以前のインストール方法を使用して MySQL 5.7.14 をインストールするときに...

純粋なCSSでは、子要素が親要素の幅制限を突破できる。

文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...

Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします

目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

jQueryはシャトルボックス効果を実現します

この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

Win10でのMySQL5.7.17無料インストール版の基本設定チュートリアルについて(画像とテキスト付き)

データベース アプリケーションは、アプリケーション システムに不可欠な部分です。リレーショナル デー...

ファイル操作のためのLinuxシステムコール

目次1. ファイルを開くパラメータの紹介2. ファイルの読み取り3. ファイルを書き込む4. 閉じる...

MySQL の列から行への変換、フィールドの結合方法 (必読)

データシート:列から行へ: max(case when then) を使用max---集計関数は最大...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...