设置输入字段的默认值

Set the default value of an input field

提问人:SebastianOpperman 提问时间:9/30/2011 最后编辑:Daniel KaplanSebastianOpperman 更新时间:9/20/2023 访问量:2084554

问:

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

JavaScript HTML 表单 输入 html-input

评论

1赞 smac89 9/17/2022
我只是想指出,根据您的输入字段,如果它是一个文件,它可能不允许设置其值。看到这个问题:stackoverflow.com/questions/61750165/...type

答:

1138赞 James 9/30/2011 #1

这是一种方法:

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

评论

7赞 SebastianOpperman 9/30/2011
我会,如果用户单击该字段,有没有办法使 vale 为 NULL?
4赞 James 9/30/2011
是的,将事件处理程序分配给擦除值 onclick 的输入字段。示例:elem.onclick = clearField();这将指向一个函数,该函数通过将值设置为 Nothing 来擦除字段,类似于上面的答案。
1赞 Dchris 3/22/2014
对我来说,它没有用。以上会创建值属性吗?
2赞 MahNas92 8/6/2016
如果您尝试更改 input-tag 本身的值,这似乎不起作用。澄清一下,如果我有一个按钮在单击时应该更改其值,我似乎无法更改它,无论是通过“this.parentNode.getElementByTagName('input').style.display='none';”还是使用 this.style.display='none';另外,我什至尝试使用“.style = display: none;';”但没有成功......
13赞 JojOatXGME 6/15/2017
上述问题的其他答案似乎忽略了默认值应更改。“使用”仅更改当前值。重置表单(例如,使用 <input type=“reset” />会将值更改回原始值。相比之下,在 Firefox 和 Chrome 中可以正常工作。默认值已更改,但仅当用户尚未修改实际值时,才会更改该值。但是,由于浏览器兼容性,不建议这样做。还有其他可能吗?.value = ...setAttribute("value", ...)setAttribute
64赞 Varada 9/30/2011 #2

如果您的表单包含类似

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

然后,您可以按照如下所示在 JavaScript 中编写代码,将其值设置为

document.getElementById('id1').value='text to be displayed' ; 
20赞 dallinchase 12/12/2012 #3

试试这些。

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

// or

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

评论

2赞 socketpair 4/4/2014
切勿为此类字段设置非文本值。如果你回读,你会在某些浏览器中读取字符串 (!) )
7赞 ultimatetechie 4/4/2014 #4

这很简单;例如:

<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>
87赞 Pepe Amoedo 6/18/2014 #5

我使用:setAttribute()

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

评论

37赞 Chris Baker 9/16/2014
value应该使用点表示法直接访问:developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute 只使用 set/getAttribute 来处理原始值。加载 DOM 后,表示元素的实际工作值。.value
6赞 MikeTeeVee 8/17/2016
@ChrisBaker如果可以的话,我会+1000这个答案。我有一个第三方应用程序,可以扫描输入字段以自动化应用程序(我的页面在嵌入式 ie 控件中呈现)。这是一个独特的方案,其中输入字段由客户端的应用使用。在我的文档就绪函数中使用 .value 回发后,输入字段没有立即重置。当我有用户启动的后续异步回发时,它会重用这些输入值来自动化他们之前点击的内容,我需要页面“忘记它们”。这是我需要的神奇酱汁。谢谢佩佩和克里斯!
4赞 ekscrypto 2/27/2017
我正在使用 Yii 2.0 并直接设置 .value = '' 不会在字段上正确运行表单验证。使用 setAttribute('value','...') 已正确处理。谢谢!
1赞 SAMPro 4/20/2018
我有一个奇怪的问题,用 .我的问题是通过函数调用更改输入的值,也更改上次更改的输入。setAttribute
1赞 Ula 4/23/2018
我只能使用这个答案将值设置为弹出式模态输入(文本)。.value 对我不起作用。谢谢
8赞 user3915050 8/6/2014 #6

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

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

评论

1赞 Sifu 8/6/2014
这样做的问题是它根本不适用于 Internet Explorer。如果您知道不会有IE客户端,那么是的,这是最好的答案。
2赞 ahruss 8/7/2014
@Sifu 即使您知道自己有 IE 客户端(可能除了 JavaScript 解决方案之外),这实际上可能是一件好事,因为它也会在清空字段时重新设置值。
1赞 8/16/2014
@Sifu IE什么时候不支持占位符属性,使用IE并转到 www.1c3br3ak3r-multimedia.ca 并查看搜索栏,则使用占位符属性
1赞 danwellman 8/20/2015
@Jdoonan不久前 - IE10 及更高版本支持 caniuse.com/#feat=input-placeholder 占位符
18赞 php-coder 9/2/2015 #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">
0赞 Bogdan Mates 9/2/2015 #8

您也可以尝试:

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

评论

4赞 Daniel Cheung 9/2/2015
设置新值不是设置默认值。因此,这并不能解决问题。一旦你获得了足够的声誉,你应该说这是帖子的评论。
28赞 David Caissy 3/17/2017 #9

如果您使用多个表单,则可以使用:

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

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

评论

4赞 tremor 6/12/2018
我喜欢这个答案的原因是,您使用表单的“name”属性而不是 DOM 元素 ID,为什么在不需要时为每个表单输入添加一个 ID 字段?
0赞 avocado 3/16/2020
@tremor完全同意,这是我找到的第一个使用“名称”而不是“id”的答案。
0赞 oCcSking 3/11/2021
按输入 ID 或按表单和输入名称检索值哪个更有效?似乎页面上的表单不多,但元素很多。
0赞 Timo 5/14/2021
使用您的代码通过表单元素设置输入值,它不会在站点的 html 中更新。当我直接处理输入时,它会更新。
0赞 Eperbab 2/20/2022
谢谢。document.getElementByName(“timer1”) 对我不起作用,但 document.forms['loginform']['timer1'] 对我有用。
8赞 Arun Karnawat 2/5/2018 #10
document.getElementById("fieldId").value = "Value";

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

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

评论

4赞 Curtis 8/6/2018
setAttribute('值','值');没有在 Chrome 上为我设置文本框中的可见值。
1赞 Tobiloba 10/17/2018 #11
<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赞 Amranur Rahman 1/3/2019 #12

您在 html 中使用的这部分

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

这是 javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
0赞 Kamil Kiełczewski 6/27/2020 #13

直接访问

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

myInput.value = 'default_value'
<input id="myInput">

2赞 Cake Princess 7/26/2020 #14

如果该字段出于某种原因只有 name 属性而没有其他属性,您可以尝试以下操作:

document.getElementsByName("INPUTNAME")[0].value = "TEXT HERE";
29赞 Runsis 11/20/2020 #15

代替使用,您可以用于不同的情况document.getElementById()document.querySelector()

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

querySelector允许您查找具有无法 用 和 表示getElementByIdgetElementsByClassName

例:

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!';
<input type="text" name="myInput" id="myInput" placeholder="Your text">

评论

2赞 Timo 5/14/2021
您想将其添加到您的答案中还是我应该发布一个新答案:广泛使用的作品。document.querySelector("#name").value='foo'id
1赞 Runsis 5/15/2021
@Timo 好吧,我的回答回答了这个问题,可以有多个规则。您的评论很有帮助!我会投赞成票,但我不会发布新的答案,因为它是一样的querySelector
0赞 manikanta 8/21/2023
如果元素已经定义,最好使用,因为它可能比 快几英里,尤其是在较大的页面上。idgetElementById()querySelector()
13赞 Rashed Rahat 4/8/2021 #16
<input id="a_name" type="text" />

以下是使用的解决方案:jQuery

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

或者,使用:JavaScript

document.getElementById("a_name").value = "Something";
-1赞 mahmoud aoata 1/6/2022 #17

以下代码运行良好:

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

评论

1赞 General Grievance 4/5/2023
在提交之前,请测试易于测试的代码。您发布的代码无法正常工作。
0赞 Ionut 4/4/2023 #18

HTML格式:

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

JS:

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

评论

1赞 General Grievance 4/4/2023
as HTMLInputElement是打字稿,不是吗?
0赞 Ionut 4/7/2023
是的,它是打字稿。