Trường đầu vào trống JavaScript

Để 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

               
   

 
 

đầ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()

6

const 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_______8

Nế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

1. Người dùng chưa nhập bất cứ thứ gì vào trường
2. 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ỗi

const 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()

0

const form = document.querySelector('form')form.addEventListener('submit', evt => {  evt.preventDefault()

1

Khi 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_______4

const 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

Làm cách nào để kiểm tra xem trường đầu vào có trống trong JavaScript không?

Làm cách nào để xóa một giá trị trong JavaScript?

Giá trị của một kiểu nhập văn bản trống là gì?