仅当输入字段为空时才将文本发送到输入字段答案

【问题标题】：Send text into input field only if it's empty仅当输入字段为空时才将文本发送到输入字段
【发布时间】：2014-03-06 16:06:33
【问题描述】：

我有一部分表单“弹出”它的正常位置，并将其自身绑定到视口的一侧。发生这种情况时，某些元素会被隐藏，只留下立即关键的数据。

我的问题是，我似乎无法将复制的数据仅放入那些具有不包含数据的匹配类的单元格中。

我相当肯定问题出在我的 JS 上：

$('.spec-table-quote-button').click(function() {
    var toCopy = $(this).closest('tr').find('td:eq(1)').text();
    var copyInto = $(".part-number-input").val('');
    $(copyInto).val(toCopy);
    $('.add-field').click();
});

这是一个查看所有片段的小提琴：http://jsfiddle.net/UjPAk/

非常感谢任何帮助。非常感谢！

【问题讨论】：

标签： javascript jquery html forms dynamic

【解决方案1】：

替换

var copyInto = $(".part-number-input").val('')

与

var copyInto = $(".part-number-input").filter(function() { return $(this).val() == '' });

.val('') 将所有匹配的事物的值设置为空字符串。它不会将匹配列表过滤为值为空字符串的元素。

【讨论】：

明白了。几乎没有超越 JS/jquery 的基础。我将不得不研究 filter() 的工作原理。再次感谢！
根据stackoverflow.com/a/1299468/349353，您还可以执行$('.part-number-input[value=""]') 之类的操作（而不是过滤器）。
是的。过滤器方法可以让您更灵活地了解“不包含数据”的构成。例如，您可以检查该值是否既不是空也不是空格。
@peterjmag，我走了很多这样的路径.. :text[value=""] 等，但这些都不起作用（更新小提琴，你会看到）。我确实有一些检查长度的东西（ if (copyInto.length === 0) function()...），但这只能阻止任何后续尝试用数据填充任何单元格。对于其他问题，我认为您可能是对的，但对于这种特殊情况，可能是因为单元格的目标是基于类而不是像 ID 这样确定的东西，所以该解决方案不起作用。
@twf1985：你说得对，[value=""] 实际上在这里不起作用。事实证明，像这样的属性选择器仅适用于在 HTML 中显式声明的属性（而不是那些由 JS 动态创建或修改的属性）。查看jsfiddle.net/peterjmag/fud8p 进行快速演示。（jQuery 和 CSS 都是如此，因此 $('input[value="something"]') 将定位与 input[value="something"] {} 相同的元素。）

【解决方案2】：

使用

var copyInto = $(".part-number-input");
copyInto.val(toCopy);

而不是

var copyInto = $(".part-number-input").val('');
$(copyInto).val(toCopy);

我认为代码是不言自明的。

【讨论】：

这两组行在做同样的事情（除了第二组首先清空“into”）。第一个更有效。
在小提琴中尝试过，不起作用。重复将数据输入到具有适当类的所有元素中的相同问题。感谢您的尝试。

【解决方案3】：

尝试：

$('.spec-table-quote-button').click(function() {
    var toCopy = $(this).closest('tr').find('td:eq(1)').text();
    $(".part-number-input").val(toCopy);
    $('.add-field').click();
});

【讨论】：

这会将数据输入到单元格中，但不会首先检查以确保单元格为空。对于每个添加的字段，任何新选择的要发送的值都会在具有匹配类的系列中的每个输入字段中复制。感谢您的尝试。