<输入type=button>和<button>

Question

我试图在我的textarea中得到一个按钮值，如果我使用<button>，它会正常工作，但是如果我使用<input type=button>，那么它就不能工作了。你能查出是什么问题吗？

<textarea id="txt-area" readonly></textarea>
<button class="buttons">1</button>
<button class="buttons">2</button>
<button class="buttons">3</button>
<button class="buttons">4</button>
<input type="button" class="buttons" value=" Test">

JavaScript

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });
    });
});

我的代码也在这个jsFiddle中

Answer 1

按钮有innerHTML，但是输入没有。您需要检查元素的标记名是输入还是按钮

检查此更新的小提琴

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        if ($(this)[0].nodeName == "INPUT" )
        {
                cntrl = $(this).attr( "value" );
        }
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });
    });
});

Answer 2

因为你必须获得价值，而不是innerHTML。所以在你的代码中应该是

var cntrl = $(this).html() || $(this).val();

Answer 3

 <textarea id="txt-area" readonly></textarea>
 <button class="buttons">1</button>
 <button class="buttons">2</button>
 <button class="buttons">3</button>
 <button class="buttons">4</button>
 <input type="button" class="buttons" value=" Test">

$(document).ready(function () {
$(".buttons").click(function () {
    var cntrl =  $(this).html();
    $("#txt-area").val(function (_, val) {
        return val + cntrl + ","
    });
});
});

这是你在jsfiddle上发布的代码..。

如果你用意味着你是在给予价值

此var cntrl = $(this).html();的插入使用var cntrl = $(this).val();

工作版本已在以下链接中更新

http://jsfiddle.net/cPYCV/32/