javascript - 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

试试这个， Fiddle Demo

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

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

• .val()方法主要用于获取input、select、textarea等表单元素的值
• .html()用于获取任意元素的内容