2012-05-02 8 views
0

灰色の入力ファイルにデフォルトのテキストが必要です。しかし、このテキストを選択することはできず、削除もできません。tumblrのようなテキストフィールドのJavascriptのデフォルトテキスト

例:

ユーザータイプ名Susan。入力をやめると、SusanCartelのように表示されます。灰色の部分がプレビューとして自動的に表示されます。その後、彼らが作成ヒットしたときにはSusanCartelと表示されます。この方法では、プレビューが表示されるため、人々はSusanCartelCartelに入力することはありません。

+0

Googleインスタントのようなもので、オートコンプリートの結果をテキストボックス内に表示します。 http://stackoverflow.com/questions/6336094/jquery-autocomplete-in-background-of-input-text-boxおよびhttp://stackoverflow.com/questions/5376956/make-part-of-をご覧ください。 inputtext-gray –

+0

@close voter - その質問は、この質問の複製ではない。 –

+0

@Rory:間違ったリンクを見つけましたが、他の人はおそらくフィットします... –

答えて

2

はHTML5が新しいplaceholderあなたが使用できるの属性があります。

<label for="username">Username:</label> 
<input type="text" name="username" id="username" placeholder="Type your username..." /> 

しかし、これはIE、または古いブラウザでは動作しません。

This pluginは、クロスブラウザと同じ効果を達成します。

+0

- >申し訳ありませんが、私は誤ってdownvoteを打つ。 –

+0

私にはOPがいくつかの静的テキストではなく、Googleインスタントのような入力ボックスに情報を自動完成したいと思うようです。しかし、質問は少し曖昧です。 –

+0

実際には、ユーザーがテキストボックスをクリックした後、入力したテキストの直後に「カルテル」という単語が自動的にテキストボックスに表示されるようなものが必要です。 「カルテル」という言葉は、選択、編集、削除ができないようにしてください。 – Rashtra

1

私は通常jquery-watermarkを使用します。詳細はpluginリンクをご覧ください。

使用法:あなたは慎重に導入を読めば、あなたはこの時点渡って来る

$('#inputid').watermark('Required information', {className: 'myClassName'}); 

また

は、(それをサポート ブラウザで)ネイティブHTML5 "プレースホルダ" 機能をサポートしていますまたはネイティブサポートを無効にして、プラグイン がすべての透かしを制御できるようにすることができます。

+0

なぜネイティブのhtml5プレースホルダを使用しないのですか? –

+1

できますが、これはCANTがHTML5をサポートしているブラウザを対象としています –

関連する問題