Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
329 views
in Technique[技术] by (71.8m points)

php - Javascript - click on buttons to populate text box

This worked perfectly - found this example using a drop down box and modified - with some help of course!

<!DOCTYPE html>
<html>
<head>
<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>

</head>

<body>
<form>

Select numbers: <br> <input type="button" value="1" name="no"     onclick="moveNumbers(this.value)">  
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">  
<input type="text" id="result" size="20">

</form>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

HTML:

<input type="text" id="screen" />
<div id="keypad">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <br />
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <br />
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <br />
    <button>0</button>
</div>

JavaScript:

window.onload = function () {
    var screen  = document.getElementById('screen'),
        keypad  = document.getElementById('keypad'),
        buttons = keypad.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            screen.value = screen.value + this.innerHTML;
            return false;
        };
    }
};?

Full example:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <form onsubmit="javascript: /* Just for testing */ alert('Sending...'); return false;">
        <input type="text" id="screen" />
        <div id="keypad">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <br />
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <br />
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <br />
            <button>0</button>
        </div>
    </form>
    <script>
        window.onload = function () {
            var screen  = document.getElementById('screen'),
                keypad  = document.getElementById('keypad'),
                buttons = keypad.getElementsByTagName('button');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    screen.value = screen.value + this.innerHTML;
                    // Try to comment line below to see what happens
                    return false;
                };
            }
        };?
    </script>
</body>
</html>

Demo: JSFiddle


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...