html単一行のテキストボックス（読み取り専用、入力あり）

Question

このテキストボックスの先頭に文字列を追加して読み取り専用にしてから、ユーザーが先にテキストを入力できるようにするにはどうすればよいですか？

<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40"></textarea> 

現在、それはあなたが内側に何も入力することができ、プレーンテキストボックスです：

は、ここに私のコードです。

私はこのようになります：

私は：デモテキスト
ですので、私は：読み取りと灰色とユーザーの入力テキストは、その前になります。

Answer 1

私は何を探していることはplaceholder属性 http://www.w3schools.com/tags/att_input_placeholder.asp

だと思うと私はあなたにもreadonly属性 http://www.w3schools.com/tags/att_input_readonly.asp

Answer 2

を探している。これは少しで行うのは非常に簡単だと思いますJavaScriptの

このようなあなたのテキストエリアのHTMLに、このようid="myTextArea"として、IDを追加します、そして、

<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40" id="myTextArea"></textarea> 

を自分のページやヘッド部のどこかに、以下のJavaScriptを追加します。

readOnlyString = "I WILL: " 
myTextArea = document.getElementById("myTextArea"); 
myTextArea.value = readOnlyString; 
preservedText = readOnlyString; 

// Check the value only when the textarea is focused and after the user presses a key 
myTextArea.onfocus = function() { 
     document.onkeyup = function (e) { 
       updatedText = myTextArea.value; 
      if (updatedText.indexOf(readOnlyString) == -1) 
      { 
        myTextArea.value = preservedText; 
      } 
       preservedText = myTextArea.value; 
     }; 
}; 

JSFiddle hereを調べることができます。