使用 HTML 按钮向输入和提交表单添加文本

Using HTML buttons to add text to input and submit form

本文关键字：提交 表单 添加 文本 输入 HTML 按钮 使用      更新时间：2023-09-26

目标：单击div时弹出带有密码输入的div（得到这部分）。在表单的文本输入字段中输入带有按钮的 PIN 码。输入正确的 4 位数字后，无需按任何类型的提交按钮即可重定向到新页面。

我

有什么：我得到了通过切换div 的样式弹出的div（显示：隐藏） 您必须单击才能获取密码输入div 的div 名为 s_wrapper_date_time 。

我需要什么：当按下任何按钮时，应将其添加到文本输入字段中。当输入正确的 4 位数字时，会自动重定向到不同的页面。没有任何提交按钮。

代码：首页.php

<div id="code_input" class="s_input_code_content s_hidden">
        <form onsubmit="javascript: return false;">
            <input id="input_screen" class="s_input_text" type="text" maxlength="4"/>
            <div id="s_keypad">
                <button id="7" value="7" class="s_btn_g s_btn_number">7</button>
                <button id="8" value="8" class="s_btn_g s_btn_number">8</button>
                <button id="9" value="9" class="s_btn_g s_btn_number">9</button>
                <button id="4" value="4" class="s_btn_g s_btn_number">4</button>
                <button id="5" value="5" class="s_btn_g s_btn_number">5</button>
                <button id="6" value="6" class="s_btn_g s_btn_number">6</button>
                <button id="1" value="1" class="s_btn_g s_btn_number">1</button>
                <button id="2" value="2" class="s_btn_g s_btn_number">2</button>
                <button id="3" value="3" class="s_btn_g s_btn_number">3</button>
                <button id="0" value="0" class="s_btn_g s_btn_null">0</button>
            </div>
        </form>
    </div>

脚本：

 <script type="text/javascript">
            $(".s_wrapper_date_time").click(function(){
                $("#code_input").toggleClass("s_hidden");
                $("#code_wrapper").toggleClass("s_hidden");
                //window.location.href = "overview.php?a=0";
            });
        </script>

谢谢你的时间。

        pin_length = 4; //set your pin length.
        $(".s_btn_g").on("click", function(){
            $("#input_screen").val($("#input_screen").val() + $(this).text());
        });
        $("#input_screen").on("change", function(){
            if($(this).val().length === pin_length) $("form").submit(); //or window.location.href, whatever
        });

确实最好使用表单名称/ID 并使用表单操作属性，而不是使用提交将查看器向下移动页面。此外，您可以禁用"输入"密钥提交。

相关文章：