设置输入字段的默认值

Question

如何在 JavaScript 中设置表单 文本字段的默认值？

Answer 1

这是一种方法：

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

Answer 2

我使用setAttribute()：

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

Answer 3

如果您的表单包含这样的输入字段

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

，您可以在 javascript 中编写代码，如下所示，将其值设置为

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

Answer 4

您可以在不同情况下使用 document.querySelector()，而不是使用 document.getElementById()

来自另一个 Stack Overflow 答案的更多信息：

querySelector 可让您查找具有无法通过的规则的元素
用 getElementById 和 getElementsByClassName

表示

用 getElementById 和 getElementsByClassName EXAMPLE:

document.querySelector('input[name="myInput"]').value = 'Whatever you want!';

或

let myInput = document.querySelector('input[name="myInput"]');
myInput.value = 'Whatever you want!';

Test:

document.querySelector('input[name="myInput"]').value = 'Whatever you want!';

<input type="text" name="myInput" id="myInput" placeholder="Your text">

Answer 5

如果您使用多种形式，您可以使用：

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

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

Answer 6

试试这些。

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

// or

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

Answer 7

答案非常简单

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

Answer 8

<input id="a_name" type="text" />

这是使用 jQuery 的解决方案：

$(document).ready(function(){
  $('#a_name').val('something');
});

或者使用 JavaScript：

document.getElementById("a_name").value = "Something";

Answer 9

简单的答案不是在 Javascript 中，获取占位符的最简单方法是通过 placeholder 属性

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

Answer 10

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

或

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

或

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

Answer 11

很简单；一个例子是：

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

Answer 12

如果该字段由于某种原因只有名称属性而没有其他属性，您可以尝试以下操作：

document.getElementsByName("INPUTNAME")[0].value = "TEXT HERE";

Answer 13

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

Answer 14

这部分你在html中使用

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

这是javaScript：

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

Answer 15

直接访问

如果使用ID，那么您可以直接访问JS全局范围内的输入

myInput.value = 'default_value'

<input id="myInput">

Answer 16

这里发生的事情比大多数答案所暗示的要多得多，也比问题让您期望的要多得多。让我们深入探讨并阐明这个问题。

设置输入元素的默认值：value 与 defaultValue、属性与属性

了解 value 属性之间的区别非常重要 和值 属性（有时也称为IDL 属性）在使用 HTML 和 JavaScript 中的输入元素时。这两者有不同的用途，了解它们的作用将使您能够有效地管理输入字段的初始值和当前值。

1. value 属性

value 属性主要用于在浏览器首次解析 HTML 时设置输入元素的初始值 。该初始值也称为默认值。

此属性对应的 JavaScript 属性不是 value，而是 defaultValue。本质上，defaultValue 属性是 value 属性的反映：

get defaultValue() { return this.getAttribute('value'); }
set defaultValue(val) { this.setAttribute('value', val); }

这里，this 指的是输入元素。正如您所看到的，value属性和defaultValue属性始终保持同步。

但是，有一个警告：如果用户尚未与输入字段进行交互，则通过 setAttribute 以编程方式设置 value 属性也会更新输入的当前值，这由 value 属性表示。一旦用户修改输入字段，这种同步就会停止。

2. value 属性

value 属性表示输入字段的当前值。

如果输入字段具有初始值（通过 HTML 中的 value 属性以声明方式设置）并且用户修改此值、value 属性和 value 属性将不再同步。一旦输入字段是“脏的”（即，用户修改过的），设置value属性将不再影响当前值。

3. value 属性与 defaultValue 属性与 value 属性 - 在实际代码中

此代码示例演示了 value 的行为> 属性、defaultValue 属性和 value 属性。尝试使用不同的按钮，观察日志输出，并注意手动修改输入字段的值后行为如何变化。

const input = document.getElementById('input');

function inspectValues() {
  console.log('value attribute: ' + input.getAttribute('value'));
  console.log('defaultValue property: ' + input.defaultValue);
  console.log('value property: ' + input.value);
  console.log('--------------------------------------');
}

function setViaAttribute() {
  input.setAttribute('value', 'set via value attribute');
  inspectValues();
}

function setViaDefaultValue() {
  input.defaultValue = 'set via defaultValue property';
  inspectValues();
}

function setViaValueProperty() {
  input.value = 'set via value property';
  inspectValues();
}

<input id="input" value="foo">
<button type="button" onclick="inspectValues()">Inspect</button>
<button type="button" onclick="setViaAttribute()">Set via value attribute</button>
<button type="button" onclick="setViaDefaultValue()">Set via defaultValue property</button>
<button type="button" onclick="setViaValueProperty()">Set via value property</button>

Answer 17

您还可以尝试：

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

Answer 18

HTML：

<input id="smtpHost" type="user" name="smtpHost">

JS：

(document.getElementById("smtpHost") as HTMLInputElement).value = data.smtpHost;

Answer 19

 
      function GetAmount()
      {
      var insertNow = document.getElementById("insert").value;
      document.getElementById("output").setAttribute('value',insertNow);
      }
   

  <label>Capture input box</label>
  <br clear="all"/>
  <input id="insert">
  <input onClick="GetAmount()" type="submit" title="Submit">
  <br/>

   <label>Display input box</label>
   <form>
   <input id="output" value="">
   <input type="submit" title="Submit">
   </form>

   

Answer 20

下面的代码工作得很好：

var $div = ('#js-div-hour input');
$div.attr('value','2022/01/10');