Chế độ Kube đóng khi nhấn enter theo mẫu

Tôi đang sử dụng phương thức từ Kube CSS & JS framework (6.5.2) với một biểu mẫu bên trong nó. Khi tôi nhấn enter, phương thức sẽ đóng mà không gửi biểu mẫu.Chế độ Kube đóng khi nhấn enter theo mẫu

Chỉnh sửa: điều này không xảy ra khi tập trung vào mật khẩu hoặc đầu vào tìm kiếm - thay đổi loại từ 'văn bản' thành 'mật khẩu' khắc phục sự cố.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Basic Template</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Kube CSS --> 
    <link rel="stylesheet" href="dist/css/kube.css"> 
</head> 
<body> 
    <h1>Hello, world!</h1> 

    <div id='ui-modal-test' class='modal-box hide'> 
     <div class='modal' style='width:95%'> 
      <span class='close'></span> 
      <div class='modal-header'>Modal Form Test</div> 
      <div class='modal-body'> 
       <form id="ui-modal-form"> 
        <input type="text" name="field1"> 
        <input type="text" name="field2"> 
        <input type="text" name="field3"> 
        <button>Apply</button> 
       </form> 
      </div> 
     </div> 
    </div> 
    <button data-component="modal" data-target="#ui-modal-test">Open</button> 

    <!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="dist/js/kube.js"></script> 
</body> 
</html>

JS:

$('#ui-modal-form').on('submit', function(event){ 
    event.preventDefault(); // modal still closes before submitting form 

    var field1 = $(this).find('input[name=field1]').val().toLowerCase(); 
    var field2 = $(this).find('input[name=field2]').val(); 
    var field3 = $(this).find('input[name=field3]').val(); 

    $.post('/post.php', { 
     field1: field1, 
     field2: field2, 
     field3: field3, 
    }, function(response){ 
     var response = JSON.parse(response); 

    }); 
});

Tôi muốn các mẫu này để gửi khi người dùng nhấn Enter trên bất kỳ đầu vào, mà không đóng hộp phương thức.

Nguồn

2017-10-10 Alex. W

Tôi đã sao chép cùng một thứ trên máy tính của mình và có vẻ hoạt động tốt. Tôi có thể gửi và xem phản hồi từ chương trình phụ trợ. Tôi có thể gửi khi con trỏ nằm trên bất kỳ trường nào. – TheChetan

Lạ, tôi đã thử nghiệm điều này trong Chrome, FF và IE. Tất cả cùng ... Bạn có gửi bằng cách sử dụng nhập không? –

Có, tôi đã thử cả bằng chuột và với nhập – TheChetan

Tôi không biết gì về Kube, nhưng tôi đã thử những gì bạn nói, đó là một vấn đề. Sau đó, tôi mở tập tin kube.js trong thư mục dist để kiểm tra phương thức. tôi thấy chức năng cụ thể này là nguyên nhân tại dòng số 2167 -

handleEnter: function(e) 
    { 
     if (e.which === 13) 
     { 
      e.preventDefault(); 
      this.close(false); 
     } 
    }

13 là mã cho Nhập sự kiện quan trọng. Đó là theo mặc định trong kube, tôi đoán. Có lẽ bạn có thể ghi đè lên điều này, tôi nghĩ rằng có một số chức năng trong nó để vô hiệu hóa các sự kiện. Nếu tôi thay đổi thông số như thế này this.close(true), thông số này hoạt động tốt.

Hy vọng điều này sẽ cho bạn biết nguyên nhân tại sao điều này xảy ra.

Kube có vẻ tốt đẹp :)

Nguồn

2017-10-20 22:48:25

Trong dòng 703, bạn có thể xem định nghĩa của hàm đóng. Bằng cách bỏ qua false, nó bỏ qua kiểm tra đầu tiên để ngăn chặn hành vi mặc định. Việc chuyển đúng sự thật sẽ giải quyết vấn đề trong trường hợp này. Đó là một cách tôi tìm thấy để giải quyết nó, có thể có một số khác. –

Tôi nhận được một lỗi: 'TypeError: e.preventDefault không phải là một chức năng' trên dòng 2004 nhưng ít nhất là phương thức không đóng !! –

Nevermind, xóa toàn bộ chức năng khắc phục sự cố :) –

  <form onSubmit={event => event.preventDefault()}> 
       <input type="text" name="field1"> 
       <input type="text" name="field2"> 
       <input type="text" name="field3"> 
       <button>Apply</button> 
      </form>

bạn cũng có thể tham khảo nếu vẫn không hoạt động:

gửi là không cần thiết, vì vậy trong trường hợp của bạn tôi sẽ đề nghị di chuyển logic của bạn trên để beforeSubmit và luôn luôn trả về false vì điều này được kích hoạt trước khi modal đóng cửa. Hiện tại, không có cách nào để đóng thủ công phương thức, ngoài việc kích hoạt chế độ sự kiện: hủy. Đây là ví dụ:

var Modal = Backbone.Modal.extend({ 
    template: _.template($('#modal-template').html()), 
    submitEl: 'button', 
    beforeSubmit: function() { 
    // show your awesome loader here 
    this.model.save(this.model.attributes, success: function() { 
     this.trigger('modal:destroy'); 
    }); 
    return false; 
    } 
});

Phương thức của bạn không gửi nếu nó không thành công và trước khi gửi chỉ được kích hoạt khi nhấn và nhấn nút.

Nguồn

2017-10-14 08:38:15

Lưu ý khá hoạt động, có lỗi trên 'this.model.save (this.model.attributes, success: function() {'. 'SyntaxError: missing) sau danh sách đối số'. Bạn lấy mã này từ đâu? Trông giống như một cái gì đó từ các tài liệu. –

$('input[type=text]').keypress(function (e) { 
    if (e.which == 13) { 
    e.stopPropagation(); 
    $('form').submit(); 
    } 
});

Nguồn

2017-10-14 08:39:59 Osama

Hành vi tương tự như trước đây. Tôi đã cập nhật câu hỏi của mình để hiển thị câu hỏi được gửi như thế nào. –

Chế độ Kube đóng khi nhấn enter theo mẫu

Trả lời

Các vấn đề liên quan