Hướng dẫn này minh họa sự kiện khóa nhập JavaScript để ngăn chặn việc gửi biểu mẫu.

Bạn đang xem : hộp nhập liệu nhập sự kiện khóa

Hướng dẫn này trình bày các cách khác nhau của việc sử dụng JavaScript enter key event để ngăn chặn gửi biểu mẫu mỗi khi nhấn phím Enter.

Lưu ý

HTML vẫn giữ nguyên cho tất cả các ví dụ ngoại trừ hai ví dụ cuối cùng.

JavaScript Nhập sự kiện chính để ngăn gửi biểu mẫu

Chúng tôi nhận được phần tử có giá trị id biểu mẫu và lưu nó vào biến phần tử trong ví dụ sau.

Sau đó, phương thức addEventListener () được sử dụng để đính kèm một trình xử lý sự kiện vào phần tử . Bất cứ khi nào nhấn phím Enter, việc gửi biểu mẫu được ngăn chặn bằng cách sử dụng event.preventDefault () .

Bạn có thể đọc thêm về chức năng này tại này trang. event.key cho biết tên khóa và event.which hiển thị mã khóa.

HTML Code:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
 & lt; title & gt; Nhập Sự kiện Chính & lt; / title & gt;
 & lt; / head & gt;
& lt; body & gt;
 & lt; form action = "#" method = "POST" id = "form" & gt;
 & lt; nhãn & gt; Tên: & lt; / label & gt;
 & lt; input type = "text" id = "first-name" name = "first-name" & gt;
 & lt; br / & gt;
 
          & lt; label & gt; Họ: & lt; / label & gt;
 & lt; input type = "text" id = "last-name" name = "last-name" & gt;
 & lt; br / & gt;
 
          & lt; input id = "submitBtn" type = "submit" value = "Gửi" / & gt;
 & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Mã JavaScript:

  var element = document.getElementById ("form");
element.addEventListener ("phím bấm", function (sự kiện) {
if (event.key === "Enter") {
 alert (event.key + "" + event.which);
 event.preventDefault ();
     }
});
 

Trong ví dụ trước, chúng tôi đang phát hiện Enter trong phần tử & lt; form & gt; . Tuy nhiên, mã được cung cấp bên dưới sẽ ngăn việc gửi biểu mẫu nếu nhấn phím Enter.

  document.addEventListener ('keypress', function (e) {
 if (e.keyCode === 13 || e.which === 13) {
 e.preventDefault ();
 trả về sai;
    }
 
});

/ * chúng ta có thể viết cùng một logic trong jQuery như sau. Bạn
có thể sao chép mã jQuery và bỏ ghi chú để thực hành. Làm
chắc chắn bao gồm thư viện jQuery. * /
/ *
$ (tài liệu) .ready (function () {
  $ (window) .keydown (function (event) {
    if (event.keyCode == 13) {
      event.preventDefault ();
      trả về sai;
    }
  });
});
* /
 

Sự kiện click không cho phép phím Enter để gửi biểu mẫu.

Mỗi khi phần tử có giá trị của id là submitBtn được nhấp vào, biểu mẫu sẽ được gửi. Xem ví dụ sau.

  document.getElementById ("submitBtn"). addEventListener ("nhấp chuột", function () {
 form.submit ();
});
 

Phương pháp dưới đây không được khuyên dùng vì HTML và JavaScript phải nằm trong các tệp riêng biệt để tổ chức mã.

Tuy nhiên, bạn cũng có thể sử dụng onkeypress < / code> trong phần tử & lt; input & gt; với type = submit , ngăn việc gửi biểu mẫu nếu nhấn phím Enter.

Chúng tôi cũng có thể sử dụng thuộc tính này cho mỗi trường đầu vào. Kiểm tra ví dụ sau.

Mã HTML:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
 & lt; title & gt; Nhập Sự kiện Chính & lt; / title & gt;
 & lt; / head & gt;
& lt; body & gt;
 & lt; form action = "#" method = "POST" id = "form" & gt;
 & lt; nhãn & gt; Tên: & lt; / label & gt;
 & lt; input type = "text" id = "first-name" name = "first-name" onkeypress = "return
(event.keyCode! = 13); "& gt;
 & lt; br / & gt;
 
          & lt; label & gt; Họ: & lt; / label & gt;
 & lt; input type = "text" id = "last-name" name = "last-name" onkeypress = "return
(event.keyCode! = 13); "& gt;
 & lt; br / & gt;
 
          & lt; input id = "submitBtn" type = "submit" value = "Submit" onkeypress = "return
(event.keyCode! = 13); "/ & gt;
 & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Chúng tôi cũng có thể tạo một hàm riêng biệt trong tệp JavaScript và gọi nó nếu nút cụ thể được nhấp. Biểu mẫu sẽ chỉ gửi nếu nút đó được nhấp vào; nếu không thì không.

Hãy xem đoạn mã sau.

Mã HTML:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
 & lt; title & gt; Nhập Sự kiện Chính & lt; / title & gt;
 & lt; / head & gt;
& lt; body & gt;
 & lt; form action = "#" method = "POST" id = "form" & gt;
 & lt; nhãn & gt; Tên: & lt; / label & gt;
 & lt; input type = "text" id = "first-name" name = "first-name" & gt;
 & lt; br / & gt;
 
          & lt; label & gt; Họ: & lt; / label & gt;
 & lt; input type = "text" id = "last-name" name = "last-name" & gt;
 & lt; br / & gt;
 
          & lt; input id = "submitBtn" type = "submit" value = "Gửi" onclick = "my Chức năng ()" / & gt;
 & lt; / form & gt;
 & lt; / body & gt;
& lt; / html & gt;
 

Mã JavaScript:

  document.addEventListener ('keypress', function (e) {
 if (e.keyCode === 13 || e.which === 13) {
 e.preventDefault ();
 trả về sai;
    }
 
});

function my Chức năng () {
   document.getElementById ("biểu mẫu"). submit ();
}
 

Viết cho chúng tôi

Các bài viết trên DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề hộp nhập liệu nhập sự kiện quan trọng

Greatness never ends: The First Look 2021 | Samsung

  • Tác giả: Samsung
  • Ngày đăng: 2021-01-06
  • Đánh giá: 4 ⭐ ( 5840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Samsung is bringing innovative technology to screen experiences in a way you’ve never seen before.

    At its 9th First Look event, the tech trailblazer goes digital to introduce its latest creations, technologies, and a new vision for a sustainable and inclusive future.

    See it all for yourself in the comfort of home. Greatness never ends, it evolves. Meet the Neo QLED at The First Look 2021

    00:00 The First Look 2021
    00:15 You're invited
    01:30 Opening speech from JH Han, President of Visual Display
    05:40 Eco-Packaging and SolarCell Remote
    11:10 Accessibility
    16:56 Vision: Screens Everywhere, Screens for All
    19:42 Neo QLED: Intro
    21:20 Neo QLED: In-home Activity
    27:20 Neo QLED: For enhanced experience
    33:11 Lifestyle TV
    37:56 MICRO LED
    44:56 Closing speech

    TheFirstLook NeoQLED Samsung

Cách để Học nhập liệu

  • Tác giả: www.wikihow.vn
  • Đánh giá: 3 ⭐ ( 1189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Học nhập liệu. Nhập liệu là công việc sao chép dữ liệu từ dạng này sang dạng khác. Hầu hết các ngành kinh doanh đều yêu cầu nhập liệu, chẳng hạn như nhập dữ liệu bán hàng vào bảng tính, sao chép nội dung ghi chép cuộc họp hoặc tích...

Dấu mốc quan trọng trong tiến trình hội nhập

  • Tác giả: nhandan.vn
  • Đánh giá: 5 ⭐ ( 5688 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một điểm trùng hợp thú vị: Hiệp định Đối tác toàn diện và tiến bộ xuyên Thái Bình Dương (CPTPP) cũng như Hiệp định Đối tác kinh tế toàn diện khu vực (RCEP) đều vượt qua những thời điểm khó khăn cuối cùng khi Việt Nam đang đảm trách cương vị nước chủ

Nhân viên nhập liệu là gì? Mô tả công việc nhập liệu bạn nên biết

  • Tác giả: sentayho.com.vn
  • Đánh giá: 5 ⭐ ( 4703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nhân viên nhập liệu là gì? Mô tả công việc nhập liệu bạn nên biết

  • Tác giả: timviec365.vn
  • Đánh giá: 3 ⭐ ( 1600 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhân viên nhập liệu là gì?Mô tả công việc nhân viên nhập liệu như thế nào? Nhân viên nhập liệu thực hiện nhập thông tin từ nhiều nguồn vào thông tin doanh nghiệp

Cách tự động ghi nhận thời gian nhập dữ liệu bằng VBA

  • Tác giả: gitiho.com
  • Đánh giá: 4 ⭐ ( 5158 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách viết mã tự động ghi nhận thời gian nhập dữ liệu bằng VBA đơn giản, dễ hiểu nhất. Nâng cao kỹ năng tin học văn phòng cùng các khóa học của Gitiho

10 hình thức nhập dữ liệu phổ biến trên thị trường hiện nay

  • Tác giả: lammarketing.edu.vn
  • Đánh giá: 5 ⭐ ( 9206 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhập dữ liệu đem lại thuận tiện và tiết kiệm thời gian, chi phí cho các doanh nghiệp. Có nhiều loại hình nhập liệu,, sau đây là 10 loại hình phổ biến nhất.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thêm Hình nền trong Html - thêm html nền hình ảnh

By ads_php