如何在html中回车提交？

Question

我试图让人们用连续的评分量表对参与者的不同单词进行评分，并在他们发现对自己选择的位置感到满意时提交。这是我的代码：

<main class="content-horizontal-center content-vertical-center">
    <div>

        <div class="m-l" style="height: 200px">
            <p class="font-weight-bold">
                ${parameters.word}
            </p>
            <p class="m-l" style="height: 100px">
                ${parameters.Bewertung}
            </p>
            <form id="pumps-form">
                <input
                        type="range"
                        name="pumps" id="pumps"
                        class="w-100"
                        min="1" max="100" step="1"
                        value="0"
                >
            </form>
        </div>
    </div>
</main>

<div>
    <input type="submit" form="pumps-form"/>
</div>

当他们按下页面底部的按钮时，表单的提交工作正常。但是，我希望能够通过按下键盘按钮来提交评级。

我尝试使用accesskey和这里提到的代码：在没有提交按钮的情况下按回车键提交表单

我还尝试用表单标签包装输入（使用 Enter 提交输入），但这也不起作用。

但是两者都不让我通过按下按钮提交代码。

谢谢！

Answer 1

我不确定这是否是您想要的，但在使用滑块选择值后按“Enter”键；

        <main class="content-horizontal-center content-vertical-center">
            <div>       
                <div class="m-l" style="height: 200px">
                    <p class="font-weight-bold">
                        
                    </p>
                    <p class="m-l" style="height: 100px">
                        
                    </p>
                    <form id="pumps-form">
                        <input
                                type="range"
                                name="pumps" id="pumps"
                                class="w-100"
                                min="1" max="100" step="1"
                                value="0"
                        >
                    </form>
                </div>
            </div>
        </main>
        
        <div>
            <input type="submit" form="pumps-form" hidden/>
        </div> 

        <div id="message"></div>
    </body>
    <script>
        document.querySelector('#pumps-form').addEventListener('keydown', (event) => {
            if(event.key === 'Enter'){
                alert('Value is: ' + document.getElementById("pumps").value);            
            return false
            }
        })
    </script>