输入字段值属性不会改变，除非type =“hidden” [英] input field value attribute wont change unless type="hidden"

问题描述

我想维护一个输入字段以保留一个不需要在前端显示的变量。
所以我创建了一个如下所示的输入字段。

html

 < input id =idvalue =class =hide-element/> 
  

css

  .hide-element {
 display：none; } 
  

和在javaScript中，我通过下面的方式更改了值。

  $（'＃id'）。val（Hello）; 
  

但是，当我使用 Google chrome的检查元素时，它显示 value属性没有改变。

 < input id =offSetvalue =class =hide-element> 
  

但是当我删除css并按照以下方式使用时。

 < input id =offSetvalue =type =hidden/> 
  

然后我打电话给

  $（ '＃OFFSET'）VAL（ 你好）。 
  

现在它会显示

 < input id =offSetvalue =Hellotype =hidden> 
  

而且 在这两种情况下，我都可以查看该值 使用下面的代码，尽管在第一种情况下没有显示。

  alert（$（'＃offSet'）。val （））; 
  

为什么会发生这种行为？ 通常，属性值描述了默认值的值，而不是当前值（您可以通过值属性（即 val（））来访问） 。

隐藏的输入不是用户可编辑的，因此您可能会发现它们的默认值和当前值是相同的。

I wanted to maintain a input field to keep a variable which does not need to display at the front-end. So I created an input filed like below.

html

<input id="id"  value=""  class="hide-element" />

css

.hide-element{
display: none;  }

and in javaScript I change the value by doing below.

$('#id').val("Hello");

But when I use Google chrome's inspect element it shows that the value attribute is not changed.

<input id="offSet" value="" class="hide-element">

but when I remove the css and use as below.

<input id="offSet"  value=""  type="hidden"/>

and then I call

$('#offSet').val("Hello");

Now it will show

<input id="offSet" value="Hello" type="hidden">

And in both cases I can view that value by using below though it is not showed in the first case.

alert($('#offSet').val());

Why is this kind of behavior happens ?

解决方案

In general, the value attribute describes the default value, not the current value (which you can access through the value property (which is what val() does)).

Hidden inputs aren't user editable, so you may find that the default and current values are the same for them.

这篇关于输入字段值属性不会改变，除非type =“hidden”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！