Question

我在我的应用程序表单中使用了一些生成的input元素，并且我试图尽可能保持简单，这就是为什么我坚持使用原生表单重置它们。

似乎在创建节点时将'默认值'绑定到元素。例如：

var inputOne = $('<input value="Original value">');
var inputTwo = $('<input>').val('Original value');
myForm.append([inputOne, inputTwo]);

在这个例子中（here's the fiddle）只有输入一个会正确重置，但是我需要使用更像输入二的东西，因为我在输入模板上有不同的类型，比输入模板中的更复杂。给出的示例，因此与值的简单字符串连接不是一个可行的选项。

我考虑在输入模板中使用占位符，例如：

var myInputTemplate = '<input value="%val" data-foo="%foo" data-bar="%bar">';

var newInputNode = createNodeFromTemplate(myInputTemplate , {
  val: "Original Value",
  foo:"My Foo",
  bar:"My Bar",
});

但这是最后的手段，请记住我尽量保持简单。

问题：

我在规范中读过一次，为每种元素类型定义了默认值，但没有给出进一步的解释。

如何为输入定义默认值？！

有一些解决方法可以“重新定义”生成的输入中的默认值吗？！

Answer 1

$('input').val(something)和$('input').attr('value', something)之间存在差异。前者设置输入的当前值。后者更改输入的value属性，该属性包含控件的初始值。它转而允许form.reset正确处理它 - 如this demo中所示。

Answer 2

jQuery的.val()不会更改输入的value属性，只会改变其内容。使用.attr()来改变value属性可以获得所需的功能。

$('<input>').attr('value', 'Original value');

http://jsfiddle.net/yAE7h/2/

Answer 3

您似乎将value属性与value属性混淆。

输入元素具有value属性，该属性是默认显示并重置的值。它对应于defaultValue属性。

它们还有value属性，其中包含当前值，可用于设置新值。

在jQuery中，.val()引用属性value，而不是属性。

然后，如果您想获得/设置默认值，请使用

       |            Get              |                 Set
---------------------------------------------------------------------------
JS     | input.getAttribute('value') | input.setAttribute('value', newVal)
jQuery | $input.attr('value')        | $input.attr('value', newVal)

JS     | input.defaultValue          | input.defaultValue = newVal
jQuery | $input.prop('defaultValue') | $input.prop('defaultValue', newVal)

否则，如果您想获得/设置当前值，请使用

       |            Get              |                 Set
---------------------------------------------------------------------------
JS     | input.value                 | input.value = newVal
jQuery | $input.prop('value')        | $input.prop('value', newVal)
jQuery | $input.val()                | $input.val(newVal)

Answer 4

您可以随时使用

设置默认值

inputTwo.prop('defaultValue','some other value');

但是这不会更新实际值属性，只更新表单重置时使用的默认值，设置value属性的首选方法仍为val()，因为它设置了本机element.value属性

inputTwo.val('value');

并且在大多数情况下，您希望更改属性，而不是属性，因为这可能会在以后导致大量其他问题。

FIDDLE

您还可以通过传递对象来创建元素

var params = {
    value   : 'Original value',
    id      : 'myID',
    'class' : 'myClass' // note the quotes, class is a reserved word in JS
}

$('<input />', params);

生成的输入和默认值

4 个答案: