2011-07-08 7 views
1

テキストボックスにテキストを入力する方法はありますか、入力することはできますか?私はボックス内に "username:"と書いて、ユーザがコロンの後ろにタイプすることを許可したいと思います。私は、テキストボックスの隣にdivを作成し、それが1つのコンテナのように見えるようにすることで難しいやり方をすることができますが、より簡単な方法があるかどうか疑問に思っていましたか?ありがとうテキストをテキストボックスに入れます

編集:私は消えてテキストにしたくありません。私はちょうどあなたが入力を続けることができるようにするユーザーにしたい

EDIT 2:テキストボックスに値を置く理由はそのフォームのためです。値に次のユーザタイプ名は、それが一緒に

+1

今後の質問では、より良いタグを使用してください。 – alex

+0

@user:だから私は混乱しています。入力をあらかじめ入力したり、隣接するスパンを使用したりするのはなぜですか? –

答えて

2

あなたはこのような何か行うことができます:

div{border:1px solid gray;} 
label{font-family:arial; font-size:.8em;} 
input{border:none;} 
input:focus{outline:none;} 

基本的に

<div> 
    <label>Username:</label> 
    <input type="text" /> 
</div> 

CSSを、 aを作成したdivlabelinputその中にdivを配置しました。 labelは、フィールドにとどまる単語です。 inputborderが削除されています。

http://jsfiddle.net/jasongennaro/rZmFx/

FYI ...あなたが承諾したい文字数に応じて、inputのサイズを大きくする必要があるかもしれません。

0

を提出するときに、ページがロードされると、あなたはこのjavascript関数を呼び出すことができます:あなたはHTML5を使用している場合は、プレースホルダの属性を使用することができます

function add(text){ 
    var TheTextBox = document.getElementById("Mytextbox"); 
    TheTextBox.value = TheTextBox.value + text; 
} 
8

HTML5は、あなたが今使用することができますplaceholderの属性があります。

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

人々は、この機能を模倣もcreated javascript functionsを持っています。

あなたがそのルートに行きたい場合は、同じことをするjQuery placeholderプラグインもあります。

+1

注目の編集、待っている説明を... –

3

標準HTMLを使用すると何が問題になりますか?あなたはそれが消えする必要がある場合は、

<input type="text" value="username: " /> 

...あなたはそれが消える必要があることを言っていない、それをサポートしていないブラウザのために(フォールバックとしてplaceholder属性とjQueryプラグインを使用します。

1
<input type="text" placeholder="Category"/> 

多分あなたを助けることができます。テキストボックスを読み込み専用にしたい場合は、プロパティreadonly = ""を置くことができます。

関連する問題