5

私の Web サイトの 1 つで、人の名前、電子メール、アイデアの説明を収集するフォームを作成しました。

大量に読みたくないので、説明の文字を500文字に制限し、ユーザーが必要なものを入力する前にテキストエリアにテキストを表示する方法を見つけました。

現在、ユーザーは「あなたのアイデアの説明」を自分で削除する必要がありますが、テキストエリアをクリックするとテキストエリアに書いたものを削除するプレースホルダークラスを追加したいと思います

私はいくつかのサイトを見てきましたが、コードに配置した使用方法を理解できませんでしたが、通常、クラスはテキストエリア内のテキストとして表示されました。

このクラスの使用に関するヘルプは素晴らしいでしょう、ありがとう

ここに私が書いたものがあります

ヘッドタグの内側

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

body タグの内側

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);" 
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
4

2 に答える 2

27

HTML5 には「プレースホルダー」と呼ばれる機能があり、コーディングをまったく行わなくても、まさにこの機能を生成できます。

placeholder次のように、フォーム フィールドに属性を追加するだけです。

<input type='text' name='name' placeholder='Enter your name'>

残念なことに、現在これをサポートしているブラウザーはごくわずかですが、Safari や Chrome で試してみて、動作を確認してください。良いニュースは、近い将来、事実上すべてのブラウザーに追加されることです。

もちろん、古いブラウザーを使用しているユーザーに対応する必要はありますが、この機能を使用できるブラウザーでこの機能を利用することもできます。

これに対処する良い方法は、placeholder属性を使用することです。ブラウザがこの機能をサポートしていない場合にのみ、Javascript ソリューションにフォールバックします。Javascript ソリューションはplaceholder属性からテキストを取得できるため、指定する必要があるのは 1 か所だけです。

placeholderこの機能がサポートされているかどうかを検出する方法については、このページを参照してください: http://diveintohtml5.ep.io/detect.html

(または、そのページに記載されているように、Modernizrを使用してください)

Javascript フォールバック コードの実装は非常に簡単です。正確な方法は、JQuery を使用するかどうかによって異なりますが、いくつかの例へのリンクを次に示します。

html5 placeholder fallbackそしてもちろん、Google は、または類似のものを検索すると、さらに多くの情報を提供してくれます。

それが役立つことを願っています。

于 2011-02-16T21:30:54.220 に答える