javascript - プレースホルダーhtmlの画像？

Question

純粋なhtmlと必要に応じてcssとjavascriptを使用してこのようなことを行うことはできますか？

そして、マウスが焦点を合わせると、次のようになります。

だから私は画像のプレースホルダーを考えていました。私は正しい方向に進んでいますか、それともより良い/より単純な、またはより簡単な方法がありますか？

編集：純粋な好奇心から、現在の回答はすべてCSSに関連しているので、JavaScriptを使用してこれをどのように達成しますか？

Answer 1

私の知る限り、これは単にCSSの背景画像です。

http://www.w3schools.com/cssref/pr_background-image.asp

そこを見てください、あなたはここのようにその位置を設定することによってこれを達成することができます：http ://www.w3schools.com/cssref/pr_background-position.asp

また、アイテムがフォーカスされているかどうかに応じて背景画像を変更することもできます。フォーカスされているときに背景画像を表示し、そうでない場合は非表示にするだけです。

#item:focus{
bacground image code here
}

ここでのフォーカスの詳細：http ：//www.w3schools.com/cssref/sel_focus.asp

そして、いくつかの焦点の使用例：http ://www.mozilla.org/access/keyboard/snav/css_usage.html

リソースで更新-@MrMisterManに感謝

http://developer.mozilla.org/en/CSS/background-image

http://developer.mozilla.org/en/CSS/background-position

JAVASCRIPT：

JavaScriptを使用して、次のように要素に属性を追加します。

これにより、フォーカスがあるときに関数が呼び出され、入力要素が渡されます。

また、onfocusoutを検出できます

これがお役に立てば幸いです。質問がある場合は質問してください:)

Answer 2

最新のブラウザのみをサポートする必要がある場合は、これを使用します。

HTML:

<input placeholder="Google Custom Search" type="search" name="q">

CSS:

#myInput::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}

JSFiddle

ブラウザのサポート

Answer 3

画像（質問のGoogleロゴ）が必要な場合は、プレースホルダー画像をテキストフィールドの背景として設定する必要があります。

input.search {
    background-image: url("placeholder.gif");
    background-repeat: no-repeat;
}
input.search:focus {
    background-image: none;
}

注： :focusはcssの疑似クラスであり、フォーカス時にアクティブ化されます

Answer 4

CSS だけを使用することもできます。

たとえば、幅 4px の実線の境界線を指定できます。またはradius
を使用して、入力の角を丸くすることができます。 ボーダーの背景画像を使用できます。moz-borderwebkit-border

ここでは、css3 境界線について読むことができますhttp://www.w3schools.com/css3/css3_borders.asp

あなたは試すことができます

input {
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px; 
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

ここに作業フィドルがあります