使用按钮将文本写入输入框答案

【问题标题】：Write text into an inputbox using buttons使用按钮将文本写入输入框
【发布时间】：2016-06-30 20:47:00
【问题描述】：

我正在尝试创建某种桌面键盘（在我的文本字段中使用/编写基里尔字母）。我遇到了一个问题，因为变量的赋值，我只能写第一个字母。

谁能告诉我一个简单的方法来解决这个问题？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script language="javascript" type="text/javascript">
            function rukeyboard() {
                var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
                document.Keyboard.outputtext.value += newtext;
            }
        </script>
    </head>
    <body>
        <form name="Keyboard">
            <input type="button" name="A" value="A" onClick="rukeyboard();">
            <input type="button" name="B" value="B" onClick="rukeyboard();">
            <input name="outputtext">
        </form>
    </body>
</html>

【问题讨论】：

标签： javascript html forms function

【解决方案1】：

这应该可以解决您的目的：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script language="javascript" type="text/javascript">
            function rukeyboard(button) {
                var newtext = button.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
                document.Keyboard.outputtext.value += newtext;
            }
        </script>
    </head>
    <body>
        <form name="Keyboard">
            <input type="button" name="A" value="A" onClick="rukeyboard(this);">        <input type="button" name="B" value="B" onClick="rukeyboard(this);">
            <input name="outputtext">
        </form>
    </body>
</html>

这是一个小提琴：https://jsfiddle.net/wet32n06/

【讨论】：

【解决方案2】：

试试这个

function rukeyboard(newtext) {
    document.Keyboard.outputtext.value += newtext;
}

<form name="Keyboard">
    <input type="button" name="A" value="A" onClick="rukeyboard(this.value);">
    <input type="button" name="B" value="B" onClick="rukeyboard(this.value);">
    <input name="outputtext" value="">
</form>

【讨论】：

【解决方案3】：

您也可以尝试此解决方案。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script language="javascript" type="text/javascript">
            function rukeyboard() {
              //  var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
                document.Keyboard.outputtext.value += document.activeElement.value;
            }
        </script>
    </head>
    <body>
        <form name="Keyboard">
            <input type="button" name="A" value="A" onClick="rukeyboard();">
            <input type="button" name="B" value="B" onClick="rukeyboard();">
            <input name="outputtext">
        </form>
    </body>
</html>

但我个人更喜欢使用 jquery 来关联函数，因为有很多输入标签，你必须手动调用每个输入标签。所以一种好方法是使用jquery.each 循环所有输入，并使用jquery on 将函数绑定到输入。

【讨论】：

【解决方案4】：

这是一个使用 Jquery 的解决方案

HTML

<body>
    <button value="A" name="A">A</button>
    <button value="B" name="B">B</button>
    <input id="outputtext" name="outputtext">
</body>

JQuery

<script>
     $(document).on("click", "button", function() {
          $("#outputtext").val($("#outputtext").val() + "" + this.value);
     });
</script>

【讨论】：