入力フィールドの値を設定する


回答:


818

これはその方法の1つです。

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

6
ユーザーがフィールドをクリックした場合、値をNULLにする方法はありますか?
SebastianOpperman

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

1
私にとってはうまくいきませんでした。上記は値属性を作成しますか?
Dchris 14年

2
これは、入力タグ自体の値を変更しようとしている場合は機能しないようです。明確にするために、クリックしたときに値を変更するボタンがある場合、「this.parentNode.getElementByTagName( 'input')。style.display = 'none」でも値を変更できないようです。 '; " また、this.style.display = 'none'; また、 "。style = display:none; ';"も使用しようとしました。成功していません...
MahNas92

7
上記の質問に対するこれと他の回答は、デフォルト値が変更されることを無視しているようです。を使用.value = ...すると、現在の値のみが変更されます。フォームをリセットすると<input type="reset" />たとえば)、値が元の値に戻ります。対照的に、setAttribute("value", ...)FirefoxとChromeでは正常に動作します。デフォルト値は変更されますが、実際の値は、ユーザーがまだ変更していない場合にのみ変更されます。ただし、setAttributeブラウザの互換性のため、推奨されません。他の可能性はありますか?
JojOatXGME 2017年

55

フォームに次のような入力フィールドが含まれている場合

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

次に、以下のようにJavaScriptでコードを記述して、その値を

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

52

「setAttribute」関数を使用します。

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

18
valueドット表記を使用して直接アクセスする必要があります:developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute set / getAttributeを使用して元の値を処理するだけです。DOMが読み込まれた後.value、要素の実際の作業値を表します。
クリスベイカー

4
@ChrisBakerできれば、この答えを+1000にします。入力フィールドをスキャンしてアプリケーションを自動化するサードパーティのアプリがあります(私のページは埋め込み、つまりコントロールでレンダリングされます)。これは、入力フィールドがクライアントのアプリによって使用されるユニークなシナリオです。ドキュメント準備機能で.valueを使用してポストバック直後に入力フィールドがリセットされませんでした。ユーザーが開始する後続の非同期ポストバックがあると、これらの入力値を再利用して、ユーザーが以前にクリックしたものを自動化し、ページで「忘れる」必要がありました。これは私が必要としたハッキーマジカルソースです。ペペとクリス、ありがとう!
MikeTeeVee

3
Yii 2.0を使用していて、.value = ''を直接設定すると、フィールドでフォーム検証が適切に実行されません。setAttribute( 'value'、 '...')の使用は適切に処理されます。ありがとう!
ekscrypto 2017

で解決した奇妙な問題がありsetAttributeます。私の問題は、関数呼び出しを通じて入力の値を変更することでした。最後に変更された入力も変更しました。
SAMPro

この答えだけを使用して、ポップアップモーダル入力(テキスト)に値を設定できました。.valueが機能しませんでした。ありがとう
ウラ

19

これらを試してください。

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

// or

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

2
このようなフィールドには、テキスト以外の値を設定しないでください。読み返すと、一部のブラウザでは文字列(!)が読み取られます)
socketpair

18

答えは本当に簡単です

// 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を使用してJavaScriptを定義できます

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

6
ここで1人だけがvalue属性の使用を提案していることに驚くべきこと...
Algy Taylor

@AlgyTaylorはあなたの努力に感謝し、素晴らしいコメントをありがとう
php-coder

15

複数のフォームを使用している場合は、以下を使用できます。

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
私がこの回答を気に入っている理由は、DOM要素IDではなくフォームの「name」属性を使用しているためです。なぜ必要のないときに、フォーム入力のそれぞれにIDフィールドを追加するのですか?
振戦

@tremorは完全に同意しました。これは、「id」ではなく「name」を使用して見つけた最初の回答です。
アボカド

8

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

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

1
この問題は、Internet Explorerではまったく機能しないことです。IEクライアントを使用しないことがわかっている場合は、はい、これが最良の答えです。
Sifu 14

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

1
@Sifu IEがプレースホルダー属性をサポートしていなかった場合、IEを使用してwww.1c3br3ak3r-multimedia.caにアクセスし、検索バーを確認します。プレースホルダー属性を使用します
RWolfe

1
@Jdoonanは実際にはそれほど前ではありません-caniuse.com/#feat=input-placeholderプレースホルダーはIE10以降でサポートされています
danwellman

6

それは簡単です; 例は次のとおりです。

<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>

4
document.getElementById("fieldId").value = "Value";

または

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

または

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribute( '値'、 '値'); Chromeでは、テキストボックスに表示される値を設定しません。
カーティス

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

デフォルト値を新しい値に変更することもできます

<script>
document.getElementById("inputid").value = 4000;     
</script>

1

あなたがhtmlで使用するこの部分

<input id="latitude" type="text" name="latitude"></p>

これはjavaScriptです。

<script>
document.getElementById("latitude").value=25;
</script>

0

あなたも試すことができます:

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

3
新しい値設定しても、デフォルト値設定されません。したがって、これは問題を解決しません。十分な評判を得たら、投稿のコメントとしてそれを言う必要があります。
Daniel Cheung
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.