2011-09-30 35 views
276

JavaScriptのテキストフィールド<input>フォームのデフォルト値をどのように設定しますか?フォームのようにその値を設定するには、以下の通り、あなたはJavaScriptでコードを書くことができ入力フィールドの値を設定する

<input type='text' id='id1' /> 

などの入力フィールドが含まれている場合

document.getElementById("mytext").value = "My value"; 

答えて

539

これはそれを行うための一つの方法です

document.getElementById('id1').value='text to be displayed' ; 
+3

、ユーザーがフィールドをクリックすると谷のNULLを作るための方法はありますか? – SebastianOpperman

+3

はい、onclickの値を消去する入力フィールドにイベントハンドラを割り当てます。例:elem.onclick = clearField(); //これは、上記の答えと同様に、値を何も設定しないでフィールドをワイプする関数を指します。 –

+1

私にとってはうまくいかなかった。上記の値属性を作成しますか? – Dchris

17

document.getElementById("current").value = 12 

// or 

var current = document.getElementById("current"); 
current.value = 12 
+1

このようなフィールドにはテキスト以外の値を設定しないでください。あなたが読み返した場合、いくつかのブラウザでは文字列(!)を読むでしょう) – socketpair

5

単純です。例は次のとおりです。

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field 
elem.value = "My default value"; // Change field 
</script> 
32

私が使用する「のsetAttribute」関数:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
    document.getElementById("example").setAttribute('value','My default value'); 
</script> 
+7

'value'はドット表記法を使って直接アクセスする必要があります:https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute元の値に対処するためにset/getAttributeを使用するだけです。 DOMがロードされた後、 '.value'は要素の実際の作業値を表します。 –

+1

@ChrisBaker可能ならば、私はこの答えを+1000にするでしょう。私はアプリケーションを自動化するために入力フィールドをスキャンするサードパーティーのアプリケーションを持っています(私のページは埋め込み型のコントロール、つまりレンダーしています)。これは、入力フィールドがクライアントのアプリケーションによって消費される独自のシナリオです。私の書類準備完了機能で.valueを使ってポストバック直後に入力フィールドがリセットされませんでした。その後の非同期ポストバックが発生すると、ユーザーはこれらの入力値を再利用して、以前にクリックしたものを自動化し、「忘れる」ページが必要になりました。これは私が必要としていたハッキーな魔法のソースです。ありがとうPepeとクリス! – MikeTeeVee

+2

私はYii 2.0を使用していますが、.value = ''を直接設定するとフォーム検証が正しく実行されません。 setAttribute( 'value'、 '...')を使用して正しく処理されます。ありがとう! – ekscrypto

7

簡単な答えは、プレースホルダを取得する最も簡単な方法はJavascriptではありませんプレースホルダー属性を使用している

<input type="text" name="text_box_1" placeholder="My Default Value" /> 
+1

これは、Internet Explorerではまったく動作しないという問題があります。あなたがIEクライアントを持っていないことが分かっているなら、はい、これが最良の答えです。 – Sifu

+2

@Sifuこれは実際には、フィールドが空になったときに値を再設定するため、IEクライアント(おそらくJavaScriptソリューションに加えて)があることを知っていても、実際には良いことです。 – ahruss

+1

@SifuいつIEがプレースホルダ属性をサポートしていないのですか?IEを使ってwww.1c3br3ak3r-multimedia.caに行き、検索バーを見て、プレースホルダ属性 – Jdoonan

6

答えは本当にシンプルです

// Your HTML text field 

<input type="text" name="name" id="txt"> 

//Your javascript 

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value"; 
</script> 

それとも、完全にJavaScriptを避けたい場合は:あなたはちょうどHTML

<input type="text" name="name" id="txt" value="My default value"> 
+0

ここで一人の人が '' value''属性の使用を提案していることに驚いています... –

+0

@AlgyTaylorはあなたの努力を感謝し、素晴らしいコメントに感謝します –

0

を使用してそれを定義することができますも試すことができます:あなたは複数のフォームを使用している場合

document.getElementById('theID').value = 'new value'; 
+2

新しい値を設定する**はデフォルト値を設定するものではありません**。したがって、これは問題を解決しません。あなたは一度あなたが十分な評判を得ている投稿のコメントとしてそれを言うべきです。 –

4

、あなたが使用することができます。

<form name='myForm'> 
    <input type='text' name='name' value=''> 
</form> 

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value"; 
</script> 
0
document.getElementById("fieldId").value = "Value"; 

または

document.forms['formId']['fieldId'].value = "Value"; 

または私は意志

document.getElementById("fieldId").setAttribute('value','Value'); 
関連する問題