jQuery:最后一个聚焦的输入字段没有按预期填充

Question

我有一个变量列表和一个字段列表，其中可能包含文本输入或文本区域。我想点击一个变量名，并让它自动附加到最后一个焦点输入/文本区域字段的内容结束(假设最后一个焦点是这些字段之一)。

下面是一个JsFiddle，它说明了我要做的事情:http://jsfiddle.net/fyUn6/

HTML:

Field 1: <input type="text" name="field[1]" /><br/>
Field 2: <input type="text" name="field[2]" /><br/>
Field 3: <input type="text" name="field[3]" /><br/>
Field 4: <textarea name="field[4]"></textarea><br/>
Field 5: <textarea name="field[5]"></textarea><br/>
<br/>
<span class="variable">NAME</span><br/>
<span class="variable">AGE</span><br/>
<span class="variable">WEIGHT</span><br/>

JavaScript:

jQuery(document).ready(function() {
    var prevFocus;
    jQuery("input[type=text], textarea").focus(function() {
        prevFocus = jQuery(this);
    });
    jQuery(".variable").click(function() {
        if(typeof prevFocus !== "undefined") {
            prevFocus.html(prevFocus.html()+jQuery(this).html());
        }
        else {
            alert("Select where you want to insert this variable first.");
        }
    });
});

请注意，当您单击文本区域(而不是首先键入它)然后单击变量时，它会正确填充。但是，它不适用于输入字段，也不适用于在文本区手动输入然后单击变量时。

这是怎么回事?为什么它只在一种情况下起作用?我确信我错过了一些简单的东西，但我仍然是jQuery的新手，并且错过了一些更精细的地方。

Answer 1

试试这个,小提琴演示

prevFocus是一个文本输入，val()是你需要的，而不是html()。

if(typeof prevFocus !== "undefined") {
    prevFocus.val(prevFocus.val()+jQuery(this).html());
}

• .val()方法主要用于获取表单元素的值，如input, select和textarea
• .html()用于获取任何元素
的内容

Answer 2

请尝试这个提琴你的jquery代码有细微的变化

jQuery(document).ready(function() {
        var prevFocus;
        jQuery("input[type=text], textarea").focus(function() {
            prevFocus = jQuery(this);
        });

        jQuery(".variable").click(function() {
            if(typeof prevFocus !== "undefined") {
                prevFocus.val(prevFocus.html()+jQuery(this).html());
            }
            else {
                alert("Select where you want to insert this variable first.");
            }
        });
});