Question

我正在尝试在我的textarea中获取一个按钮值，如果我使用<button>，则工作正常但是如果我使用<input type=button>则不起作用。你能找出问题所在吗？

HTML

<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。所以在你的代码中它应该是

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

Answer 2

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

Answer 3

按钮有内部HTML但INPUT没有。您需要检查元素的标记名称是输入还是按钮

检查此更新的fiddle

$(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 4

如果您使用的是[<button>]，那么您应该使用$('.class').text(); 如果您使用的是[<input type="button">]，那么$('.class').val();可以正常使用。

Answer 5

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<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">

＆＃13;

希望这有助于某人！

html - <input type =“button”/>和<button>

5 个答案: