2

検索ボックスに「検索」テキストを追加する作業を行っています。私は達成しようとしています:

onfocus: テキストを消す

と

onblur: テキストを再表示する

これまでのところ、これを達成しましたが、html にハードコードする必要がありました。

例えば。

<input type="text" name="s" id="search-text" size="15" value="Search"  
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">

これを .html ファイルに追加すると、同じ結果が得られます。

例えば。

<script type="text/javascript">
var defaultText = "Search...";
var searchBox = document.getElementById("search");

//default text after load
searchBox.value = defaultText;

//on focus behaviour
searchBox.onfocus = function() {
    if (this.value == defaultText) {//clear text field
        this.value = '';
    }
}

//on blur behaviour
searchBox.onblur = function() {
    if (this.value == "") {//restore default text
        this.value = defaultText;
    }
}
</script>

(礼儀: http://zenverse.net/javascript-search-box-show-default-text-on-load/ )

私が達成しようとしているのは、外部の.jsファイルで上記のコードを使用することですが、何をしても.htmlファイルの検索ボックスにコードを逆リンクすることができません。

これが悪い質問である場合は申し訳ありませんが、約 10 個の異なる .html ファイルと .js ファイルのスワップと再マッピング コードを作成しましたが、実際の .html ファイルに JavaScript がないと機能しません。

どんな助けでも大歓迎ですありがとう。

4

4 に答える 4

13

HTML5 プレースホルダー属性を使用します。

<input type="text" placeholder="Search" />

ユーザーが何らかのテキストを入力するまで、テキストは消えないことに注意してください。このようにして、ユーザーはヒントをより長く見ることができます。

于 2012-12-28T12:06:24.107 に答える
1

HTMLプレースホルダー属性を使用してみてください。

<input type="text" name="s" id="search-text" size="15" value="" placeholder="Search" />

ただし、それでも JavaScript を使用したい場合は、次のデモをご覧ください。

var defaultText = "Search...";
var searchBox = document.getElementById("search");
 
//default text after load
searchBox.value = defaultText;
 
//on focus behaviour
searchBox.onfocus = function() {
    if (this.value == defaultText) {//clear text field
        this.value = '';
    }
}
 
//on blur behaviour
searchBox.onblur = function() {
    if (this.value == "") {//restore default text
        this.value = defaultText;
    }
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="get" action="">
    <input type="text" name="search" id="search" value="" />
    <input type="submit" name="submit" value="Search" />
</form>
 

</body>
</html>

于 2012-12-28T12:07:30.910 に答える
0

以下のスクリプトを使用すると、正常に動作します。

<script type="text/javascript">
 var defaultText = "Sitede ara…";
 var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");

 //default text after load
 searchBox.value = defaultText;

 //on focus behaviour
 searchBox.onfocus = function () {
     if (this.value == defaultText) {//clear text field
         this.value = '';
     }
 }

于 2015-04-09T10:04:26.520 に答える
0

古いブラウザーでのプレースホルダーのサポートについては、 jQuery Placeholderを参照すると役立つ場合があります。

于 2013-04-04T09:36:59.640 に答える