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 : nhập javascript trình xử lý 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 để dừng biểu mẫu gửi 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.

< h2 id = "javascript-enter-key-event-to-Prevent-form-submit"> 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 form 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ủ đề nhập javascript trình nghe chính

Bài 10: JavaScript

  • Tác giả: Tran Huong CNTT
  • Ngày đăng: 2021-11-16
  • Đánh giá: 4 ⭐ ( 8284 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tranhuongCNTT tranhuong JavaScript ThiếtkếWeb Gọi_hàm_trong_JavaScript JavaScript_trong_thiết_kế_Web JavaScript_trongthiếtkếWeb

    CẢM ƠN TẤT CẢ QUÝ VỊ
    "ĐĂNG KÝ" ỦNG HỘ KÊNH PHÁT TRIỂN
    "LIKE" NẾU CẢM THẤY VIDEO HỮU ÍCH.

Le Academy: Đăng nhập vào trang

  • Tác giả: hoclaptrinhonline.asia
  • Đánh giá: 4 ⭐ ( 8364 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khóa học lập trình online miễn phí dành cho sinh viên công nghệ thông tin, lập trình viên nâng cao kiến thức và kỹ năng do cộng đồng Agile Đà Nẵng xây dựng

tailieunhanh - Giáo trình công nghệ thông tin: JavaScript

  • Tác giả: tailieunhanh.com
  • Đánh giá: 4 ⭐ ( 9991 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tailieunhanh - Với HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ ch−a phải là các trang Web động có khả năng đáp. có thể gắn với các file HTML. Nó không đ−ợc biên dịch mà đ−ợc trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã dễ biên dịch, trình duyệt đọc JavaScript d−ới dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript qua ví dụ. | ., download, tải miễn phí, pdf, doc, docx, xls, xlsx, ppt,pptx

[Tự học Javascript] Top những trình chỉnh sửa code or IDE cho Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 1495 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trình soạn thảo code là nơi các lập trình viên dành phần lớn thời gian của họ.Có hai loại trình soạn thảo code chính: IDE và trình soạn thảo nhẹ. Nhiều người chỉ sử dụng một công cụ của từng loại.

Nhập môn JavaScript hiện đại (Phần 2): Lập trình không đồng bộ

  • Tác giả: ngocminhtran.com
  • Đánh giá: 4 ⭐ ( 2362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các nhà phát triển cung cấp nhiều API Web giúp việc truy cập hay nạp dữ liệu từ các nguồn trên Internet  hiệu quả hơn nhờ cơ chế làm việc không đồng bộ. Lập trình không đồng bộ Một chương trình máy tính thực thi các nhiệm vụ (tasks) của nó nhờ các tiểu trình…

Lập trình viên ReactJS tại Công ty cổ phần Công nghệ và Truyền thông TCOM

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

Nhập môn lập trình với Javascript

  • Tác giả: phambinh.net
  • Đánh giá: 3 ⭐ ( 1234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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  SQL Server Chuyển đổi ngày giờ thành chuỗi + Ví dụ - sql datetime sang định dạng chuỗi

By ads_php