javascript - HTMLページで画像を押してテキスト出力を取得するには?

Question

Phonegap を使用して Android アプリを作成しています。たとえば、0〜9の数字などの画像を押して、出力としてテキストボックスで結果を受け取ることができるようにしたいと考えています。

たとえば、1 番の画像を押すと、テキスト ボックスに「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/