编程设置数字输入值无效

Programmatically Setting Number Input Value Not Working

本文关键字：无效 数字输入 设置 编程      更新时间：2023-09-26

我有一段javascript，用于设置数字输入值。然而，它不会起作用。调用后，输入的value字段仍然为空（尽管输出元素val（）的console.log（）确实显示了正确的值）。我尝试过用jQuery的.val（total）、.attr（'value'，total）和普通的旧.value=三种方式设置值，但仍然没有。我甚至用html替换了整个元素，并将值连接到value属性中，但它不起作用。

有什么想法为什么不需要？

这是标记：

<div id="proposal_price_box">
  <div class="proposal_price_header sys_bkgcolor">
    <span class="title"><h3>Price to Appear on Proposal</h3></span>
  </div>
  <div class="inner">
    <span class="label">$</span>
    <input type="number" class="amount-input" id="proposal_price" value=""/>
  </div>
</div>

以及相关的javascript：

$('#proposal_price').val('1234');

Jsfidle演示了下面的问题。

http://jsfiddle.net/n8z9K/12/

不知怎的，如果显示了元素的容器，它就会设置值。但一旦它再次隐藏起来，它就会断裂。

编辑对不起，我没有在JSfiddle中正确演示该问题。我正在尝试克隆容器中的内容并将其放置在其他位置。我已经更新了jsfiddle以更好地显示这个问题。

输入节点的值与其值属性之间存在差异。当您使用val（）方法分配它的值时，您设置的是它的值，而不是它的value属性。当您使用html（）方法时，您将获得具有所有属性（包括value属性）的html，但该属性在您的val（）赋值中没有更改。只有节点的值发生了更改。

您执行#proposal_price { display: none; }。如果您使用该元素，它将保持相同的ID（这实际上是无效的，但现代浏览器可以处理此问题）。因此，由于display: none;，它仍然是隐藏的。您应该删除克隆的ID，否则克隆也不会显示。

是的，这个jQuery似乎解决了这个问题：

$(document).ready(function() {
    $('#proposal_price').val('123');
    console.log("before clone");
    clone = $('#proposal_container').clone();
    clone.attr("id", "");
    console.log("after clone");
    $('body').append(clone.html());
});
相关文章：