【问题标题】：Set the value of an input field设置输入字段的值
【发布时间】：2011-11-28 09:02:51
【问题描述】：

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

【问题讨论】：

标签： javascript html forms input html-input

【解决方案1】：

以下代码运行良好：

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

【讨论】：

【解决方案2】：

这对我有用

//HTML
<div id="mytext">Some Text Value</div>

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

【讨论】：

【解决方案3】：

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

这是使用jQuery的解决方案：

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

或者，使用JavaScript：

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

编码愉快:)

【讨论】：

【解决方案4】：

2021 答案

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

more info from another StackOverflow answer:

querySelector 可让您找到具有无法找到的规则的元素用getElementById和getElementsByClassName表示

示例：

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

或

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

测试：

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

&lt;input type="text" name="myInput" id="myInput" placeholder="Your text"&gt;

【讨论】：

您想将其添加到您的答案中还是我应该发布一个新答案：document.querySelector("#name").value='foo' 与广泛使用的id 一起使用。
@Timo 我的回答很好地回答了这个问题，querySelector 可以有多个规则。你的评论很有帮助！我会支持它，但我不会发布新答案，因为它是相同的

【解决方案5】：

如果该字段出于某种原因只有一个名称属性而没有其他属性，您可以试试这个：

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

【讨论】：

【解决方案6】：

直接访问

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

myInput.value = 'default_value'

&lt;input id="myInput"&gt;

【讨论】：

【解决方案7】：

这部分你在html中使用

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

这是javaScript：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

或

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

或

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

【讨论】：

setAttribute('value','Value');没有在 Chrome 上为我设置文本框中的可见值。
帮助！我做了所有这些，但是一旦我单击另一个字段或单击页面上的任何按钮，值总是会变回原始值。我用class“_56AraZ”做的网站shopee.vn/buyer/login?next=https%3A%2F%2Fshopee.vn%2F

【解决方案10】：

如果你使用多个表单，你可以使用：

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

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

【讨论】：

我喜欢这个答案的原因是，您使用表单的“名称”属性而不是 DOM 元素 ID，为什么不添加 ID 字段到每个表单输入需要吗？
@tremor 完全同意，这是我使用“name”而不是“id”找到的第一个答案。
什么更高效，通过输入id或表单和输入名称检索值？看起来页面上的表单不多，但元素很多。
使用您的代码通过表单元素设置输入值，它不会在网站上的 html 中更新。当我直接处理输入时，它会更新。

【解决方案11】：

这是一种方法：

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

【讨论】：

我会的，如果用户点击该字段，有没有办法使 vale 为 NULL ？
是的，为输入字段分配一个事件处理程序，以擦除 onclick 的值。示例：elem.onclick = clearField(); // 这将指向一个通过将值设置为空来擦除字段的函数，类似于上面的答案。
对我来说没有用。以上会创建 value 属性吗？
如果您尝试更改输入标签本身的值，这似乎不起作用。澄清一下，如果我有一个按钮在单击时应该更改其值，我似乎无法更改它，也无法通过 "this.parentNode.getElementByTagName('input').style.display='none ';"也不使用 this.style.display='none';另外，我什至尝试使用“.style = display: none;';”没有成功...
对上述问题的这个和其他答案似乎忽略了应该更改 default 值。使用.value = ... 只会更改当前值。重置表单 （例如 <input type="reset" />） 会将值更改回原来的值。相比之下，setAttribute("value", ...) 在 Firefox 和 Chrome 中可以正常工作。默认值已更改，但实际值仅在用户尚未修改时才更改。但是，由于浏览器兼容性，不推荐使用setAttribute。还有没有其他可能？

【解决方案12】：

你也可以试试：

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

【讨论】：

设置新值不是设置默认值。因此，这并不能解决问题。一旦获得足够的声誉，您应该将其作为帖子的评论。

【解决方案13】：

答案很简单

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

【讨论】：

令人惊讶的是这里只有一个人建议使用value 属性...
@AlgyTaylor 感谢您的努力并感谢您的精彩评论

【解决方案14】：

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

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

【讨论】：

这个问题是它根本不适用于 Internet Explorer。如果您知道自己不会拥有 IE 客户端，那么是的，这是最好的答案。
@Sifu 这实际上可能是一件好事，即使您确实知道您有 IE 客户端（可能除了 JavaScript 解决方案之外），因为它还会重新设置字段清空时的值。
@Sifu IE什么时候不支持占位符属性，用IE去www.1c3br3ak3r-multimedia.ca看搜索栏，它使用占位符属性
@Jdoonan 实际上不久前 - 在 IE10 及更高版本中支持 caniuse.com/#feat=input-placeholder 占位符

【解决方案15】：

我使用'setAttribute'函数：

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

【讨论】：

value 应该使用点符号直接访问：developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute 你只使用 set/getAttribute 来处理原始值。 DOM加载完成后，.value代表元素的实际工作值。
@ChrisBaker 如果可以的话，我会 +1000 这个答案。我有一个第 3 方应用程序，它扫描输入字段以使应用程序自动化（我的页面呈现在嵌入式即控件中）。这是一个独特的场景，其中输入字段由客户端的应用程序使用。在我的文档就绪函数中使用 .value 回发后，输入字段没有立即重置。当我有一个用户将启动的后续异步回发时，它会重用这些输入值来自动化他们之前点击的东西，我需要页面来“忘记它们”。这是我需要的 hacky 魔法酱。谢谢佩佩和克里斯！
我正在使用 Yii 2.0 并直接设置 .value = '' 不会在字段上正确运行表单验证。正确处理使用 setAttribute('value','...') 。谢谢！
我有一个奇怪的问题，用setAttribute 解决了。我的问题是通过函数调用更改输入的值，也更改最后更改的输入。
我只能使用这个答案将值设置为弹出模式输入（文本）。 .value 对我不起作用。谢谢

【解决方案16】：

这很简单；一个例子是：

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

【讨论】：

【解决方案17】：

试试这些。

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

// or

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

【讨论】：

永远不要为这些字段设置非文本值。如果您回读，您将在某些浏览器中读取字符串（！））
帮助！我这样做了，但是一旦我单击另一个字段或单击页面上的任何按钮，值总是会变回原始值。这是我做的网站（类“_56AraZ”）shopee.vn/buyer/login?next=https%3A%2F%2Fshopee.vn%2F 谁能告诉我如何真正设置值以自动登录该网站。

【解决方案18】：

如果您的表单包含像

这样的输入字段

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

然后你可以用下面给出的javascript编写代码来设置它的值

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

【讨论】：

帮助！我这样做了，但是一旦我单击另一个字段或单击页面上的任何按钮，值总是会变回原始值。这是我做的网站（类“_56AraZ”）shopee.vn/buyer/login?next=https%3A%2F%2Fshopee.vn%2F 谁能告诉我如何真正设置值以自动登录该网站。