Как предотвратить перезагрузку веб-сайта Dojo с помощью Enter

У меня есть диалоговое окно Dojo, в котором есть форма, текстовое поле и кнопка.

Когда форма открыта, я печатаю что-то в текстовом поле и нажимаю Enter, весь веб-сайт перезагружается.

Как я могу предотвратить это? Нажатие кнопки OK работает, как и ожидалось. Есть ли способ отключить поведение 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();

javascript html dojo dijit.form dijit.dialog
person fpolig01    schedule 29.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

По умолчанию форма отправляется, когда мы нажимаем Enter, чтобы предотвратить это, вы должны прослушать событие отправки и предотвратить действие браузера по умолчанию, используя event.preventDefault()

добавление приведенного выше кода решит вашу проблему:

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

См. рабочий фрагмент belwo:

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>

person Spring    schedule 29.01.2021
comment
Отлично! Это сработало, спасибо. Кроме того, является ли метод, с помощью которого я получаю значение формы, правильным/обычным? Я чувствую, что есть лучший способ сделать это. Это единственный способ, который я смог придумать. - person fpolig01; 29.01.2021
comment
@fpolig01 fpolig01, да, я отредактировал ответ, чтобы показать пример, как получить значения в форме с примером проверки (использовал valdiationtextbox вместо inputtext), см. Ниже редакцию :) - person Spring; 29.01.2021