设置输入字段的值


Answers:


818

这是一种实现方式:

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

6
我将,如果用户单击该字段,是否有办法使vale为NULL?
SebastianOpperman

4
是的,将事件处理程序分配给可擦除onclick值的输入字段。示例:elem.onclick = clearField(); //这将指向通过将值设置为空来擦除字段的函数,类似于上面的答案。
詹姆斯

1
对我来说,它没有用。以上将创建值属性吗?
Dchris

2
如果您尝试更改输入标签本身的值,那么这似乎不起作用。要澄清的是,如果我有一个按钮,当单击该按钮时应该更改其值,我似乎无法更改它,也不能通过“ this.parentNode.getElementByTagName('input')。style.display ='none ';” 也不使用this.style.display ='none'; 另外,我什至尝试使用“ .style = display:none;';” 没有成功...
MahNas92 '16

7
上面问题的这个答案和其他答案似乎忽略了应更改默认值。使用.value = ...只会更改当前值。重置表格<input type="reset" />例如使用)会将值更改回原始值。相反,setAttribute("value", ...)在Firefox和Chrome中可以正常工作。默认值已更改,但实际值仅在用户尚未修改时才更改。但是,setAttribute由于浏览器兼容性,不建议使用。还有其他可能性吗?
JojOatXGME

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的答案。我有一个第三方应用程序,可以扫描输入字段以使应用程序自动化(我的页面呈现在嵌入式即Control中)。这是一种独特的情况,其中输入字段由客户端的应用程序使用。回发后,在我的文档就绪功能中使用.value时,输入字段没有立即重置。当我进行后续的异步回发时,用户将启动,它将重用这些输入值以使他们之前单击的内容自动化,因此我需要页面“忘记它们”。这是我需要的hacky魔法酱。谢谢佩佩和克里斯!
MikeTeeVee

3
我正在使用Yii 2.0并直接设置.value =''在字段上无法正确运行表单验证。使用setAttribute('value','...')会得到正确处理。谢谢!
ekscrypto

我有一个奇怪的问题可以用解决setAttribute。我的问题是通过函数调用更改输入的值,也更改最后更改的输入。
SAMPro

我只能使用此答案将值设置为弹出模式输入(文本)。.value对我不起作用。谢谢
Ula

19

试试这些。

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

// or

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

2
切勿将非文本值设置为此类字段。如果回读,您将在某些浏览器中读取字符串(!))
socketpair,2014年

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进行定义

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

6
令人惊讶的是,这里只有一个人建议使用该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,为什么在不需要时将ID字段添加到每个表单输入中?
震颤

@tremor完全同意,这是我使用“名称”而不是“ id”找到的第一个答案。
鳄梨

8

简单的答案不是用Javascript获得占位符的最简单方法就是通过占位符属性

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

1
问题在于它根本不适用于Internet Explorer。如果您知道将不会有IE客户端,那么可以,这是最好的答案。
锡夫2014年

2
@Sifu这可能是真正做的,即使你一个好东西知道你有IE客户端(可能除了JavaScript解决方案),因为它也将重新设置的值时,该字段被清空。
ahruss

1
@Sifu IE何时不支持占位符属性,使用IE并转到www.1c3br3ak3r-multimedia.ca并查看搜索栏,它使用占位符属性
RWolfe 2014年

1
@Jdoonan不久前实际上-IE10及更高版本支持caniuse.com/#feat=input-placeholder占位符
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('value','Value'); 在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>


0

您也可以尝试:

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

3
设置新值不会设置默认值。因此,这不能解决问题。一旦获得足够的声誉,就应该说这是该帖子的评论。
张敬轩
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.