如何防止Enter导致Dojo网站重新加载

Question

我有一个 Dojo 对话框，其中有一个表单、文本框和按钮。

当表单打开并且我在 TextBox 中输入内容并按 Enter 时，整个网站会重新加载。

我怎样才能防止这种情况？ 单击“确定”按钮按预期工作。 有没有办法可以禁用 Enter 行为？

var form = new Form();

new TextBox({
    placeHolder: "enter value:"
}).placeAt(form.containerNode);

new Button({
    label: "OK", 
    'onClick': function () {
        console.log(`form value is: ${form._descendants[0].value}`)
        dia.hide();
    },
}).placeAt(form.containerNode);

var dia = new Dialog({
    content: form,
    title: "Save",
    style: "width: 300px",
});

form.startup();
dia.show();

Answer 1

默认情况下，当我们点击回车时表单提交，为了防止这种情况发生，您必须监听提交事件并使用event.preventDefault()阻止默认浏览器操作

添加上面的代码将解决您的问题：

form.on("submit", function(e){
    e.preventDefault();
})

请参阅下面的工作片段：

 require(["dijit/Dialog", "dijit/registry", "dojo/ready", "dijit/form/Button", "dijit/form/Form", "dijit/form/ValidationTextBox"], function(Dialog, registry, ready, Button, Form, ValidationTextBox) { ready(function() { var form = new Form(); new ValidationTextBox({ name:"textValue", required:true, placeHolder: "enter value:" }).placeAt(form.containerNode); new ValidationTextBox({ name:"otherTextValue", required:true, placeHolder: "enter value:" }).placeAt(form.containerNode); new Button({ label: "OK", type:"submit" }).placeAt(form.containerNode); var dia = new Dialog({ content: form, title: "Save", style: "width: 300px", }); form.on("submit", function(e){ e.preventDefault(); if(form.validate()) { console.log(form.get("value")) dia.hide() } }) form.startup(); dia.show(); registry.byId("btn").on("click", function() { form.reset(); dia.show(); }); }); } );

 <script type="text/javascript"> dojoConfig = { isDebug: true, async: true, parseOnLoad: true } </script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" /> <body class="claro"> <div data-dojo-type="dijit/form/Button" id="btn"> show again </div> </body>

如何防止Enter导致Dojo网站重新加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-29 14:08:31

如何防止Enter导致Dojo网站重新加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-29 14:08:31

解决方案1
1 已采纳 2021-01-29 14:08:31