javascript - 如何通过在 html 页面中按下图像来获取文本输出？

Question

我正在使用 Phonegap 编写一个 Android 应用程序。我希望能够按下图像，例如从 0-9 的数字，并作为输出在文本框中接收结果。

例如，如果我按下显示第一的图像，我会在我的文本框中得到“1”。

如何使用 html 和 JavaScript 来完成？

Answer 1

使用 jQuery 你可以这样做：

HTML

<input type="text" id="output" />

<ul class="buttons">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li>
    <li><a data-value="4">4</a></li>
    <li><a data-value="5">5</a></li>
    <li><a data-value="6">6</a></li>
    <li><a data-value="7">7</a></li>
    <li><a data-value="8">8</a></li>
    <li><a data-value="9">9</a></li>
</ul>

CSS

#output { font-size:1.6em; }

ul.buttons {
    max-width: 300px;
}
ul.buttons li {
    background: #eee;
    float: left;
    margin: 1% 1% 0 0;
    width: 30%;
}
ul.buttons li a {
    cursor: pointer;
    display: block;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

JavaScript

$( document ).ready( function () {

    var $output = $( '#output' )

    $( 'ul.buttons a' ).unbind( 'click' ).bind( 'click', function () {

        var value = $( this ).attr( 'data-value' );
        $output.val( $output.val() + value );

    } );

} );

小提琴：http: //jsfiddle.net/kboucher/wJ9R8/