Để xóa trường nhập JavaScript onClick đặt trường nhập thành chuỗi trống bằng hàm JavaScript. Hoặc Chỉ cần sử dụng nút đặt lại đơn giản
Xóa trường nhập liệu JavaScript onClick
Một hàm JavaScript đơn giản sẽ thực hiện công việc
function ClearFields[] {
document.getElementById["textfield1"].value = "";
document.getElementById["textfield2"].value = "";
}
Và chỉ cần có nút của bạn gọi nó
Clear
Hoàn thành mã ví dụ
Clear
function ClearFields[] {
document.getElementById["textfield1"].value = "";
document.getElementById["textfield2"].value = "";
}
đầu ra
Hãy bình luận nếu bạn có bất kỳ nghi ngờ hoặc đề xuất nào về chủ đề Js HTML này
Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome
hệ điều hành. cửa sổ 10
Mã số. Phiên bản HTML5
Rohit
Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật
Tuần trước, tôi đã chia sẻ cách kiểm tra xem đầu vào có trống không bằng CSS. Hôm nay, hãy nói về điều tương tự, nhưng với JavaScript
Nó đơn giản hơn nhiều
Đây là những gì chúng tôi đang xây dựng
Các sự kiện để xác thực đầu vào
Nếu bạn muốn xác thực đầu vào khi người dùng nhập vào trường, bạn có thể sử dụng sự kiện
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
6const input = document.querySelector['input']input.addEventListener['input', evt => { // Validate input}]
Nếu bạn muốn xác thực đầu vào khi người dùng gửi biểu mẫu, bạn có thể sử dụng sự kiện
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
7. Hãy chắc chắn rằng bạn ngăn hành vi mặc định với______4_______8Nếu bạn không ngăn hành vi mặc định, trình duyệt sẽ điều hướng người dùng đến URL được nêu trong thuộc tính hành động
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
// Validate input}]
Xác thực đầu vào
Chúng tôi muốn biết liệu đầu vào có trống không. Đối với mục đích của chúng tôi, phương tiện trống rỗng
- Người dùng chưa nhập bất cứ thứ gì vào trường
- Người dùng đã nhập một hoặc nhiều khoảng trống, nhưng không phải các ký tự khác
Trong JavaScript, các điều kiện đạt/không đạt có thể được biểu diễn dưới dạng
// Empty' '' '' '
// Filled'one-word''one-word '' one-word'' one-word ''one phrase with whitespace''one phrase with whitespace '' one phrase with whitespace'' one phrase with whitespace '
Kiểm tra điều này thật dễ dàng. Chúng ta chỉ cần sử dụng phương pháp
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
9. const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
9 xóa mọi khoảng trắng ở phía trước và phía sau của chuỗiconst value = input.value.trim[]
Nếu đầu vào hợp lệ, bạn có thể đặt
// Validate input}]
1 thành // Validate input}]
2. Nếu đầu vào không hợp lệ, bạn có thể đặt // Validate input}]
1 thành // Validate input}]
4// This is JavaScript
input.addEventListener['input', evt => { const value = input.value.trim[]
if [value] { input.dataset.state = 'valid' } else { input.dataset.state = 'invalid' }}]
/* This is CSS */
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
0const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
1Khi người dùng nhập văn bản vào trường, quá trình xác thực đầu vào sẽ bắt đầu. Tuy nhiên, nếu người dùng xóa tất cả văn bản khỏi trường, đầu vào tiếp tục không hợp lệ
Chúng tôi không muốn làm mất hiệu lực đầu vào nếu người dùng xóa tất cả văn bản. Họ có thể cần một chút thời gian để suy nghĩ, nhưng trạng thái vô hiệu hóa sẽ gây ra cảnh báo không cần thiết
Để khắc phục điều này, chúng tôi có thể kiểm tra xem người dùng đã nhập bất kỳ văn bản nào vào đầu vào trước khi chúng tôi
const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
9 nóconst form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
2_______4_______3_______4_______4const form = document.querySelector['form']form.addEventListener['submit', evt => { evt.preventDefault[]
5Đây là một Codepen để bạn chơi cùng
Xem xác thực Pen Empty bằng JavaScript của Zell Liew [@zellwk] trên CodePen
Cảm ơn vì đã đọc. Bài viết này đã giúp bạn ra ngoài? . Bạn có thể giúp đỡ người khác. Cám ơn rất nhiều
Bài viết này ban đầu được đăng tại blog của tôi
Đăng ký nhận bản tin của tôi nếu bạn muốn có nhiều bài viết hơn để giúp bạn trở thành nhà phát triển giao diện người dùng tốt hơn
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nếu bài viết này hữu ích, hãy tweet nó
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu