Làm cách nào để đặt lại đầu vào trong JavaScript?

Trong JavaScript, chúng tôi thường xem xét một thuộc tính cụ thể để xử lý giá trị đầu vào. Thuộc tính value cùng với phương thức getElementById() lấy thông tin chi tiết của trường đầu vào

Sau đó, chúng ta có thể thực hiện một số điều kiện dựa trên mục nhập. Một lần nữa, chúng ta cũng có thể dựa vào một số thuộc tính HTML để kết nối các phần tử đầu vào và các hàm JavaScript

Ở đây, chúng tôi sẽ trình bày một số ví dụ có thể được thực hiện theo nhiều cách

Sử dụng thuộc tính onfocus cho trường đầu vào Vanish trong JavaScript

Ban đầu, chúng tôi sẽ khai báo một trường đầu vào với một giá trị được xác định cho ví dụ này. Ngoài ra, phần tử đầu vào sẽ chuyển sang thực hiện chức năng clearF(this) ngay khi con trỏ trỏ hoặc tiêu điểm trong hộp nhập liệu

Nếu điều kiện của hàm được phục vụ, nó sẽ xóa giá trị và do đó đầu vào sẽ bị xóa

  
  
  test

đầu ra

Nội dung của nó biến mất khi con trỏ được đặt và nhấp vào trường nhập liệu. this đề cập đến giá trị của nó đối với phần tử cụ thể

Sử dụng câu lệnh có điều kiện để xóa giá trị đầu vào của biểu mẫu trong JavaScript

Theo một biểu mẫu gửi, cần có một phần tử nút tương ứng để lưu trữ dữ liệu. Chúng ta sẽ lấy một phần tử form và phần tử button được liên kết với nó sẽ mang thuộc tính

  
  
  test


  

    
 

Hàm sẽ kiểm tra xem trường nhập có trống hay không. Nếu nó tìm thấy bất kỳ nội dung nào, nó sẽ đơn giản khởi tạo lại nội dung trống

  
  
  test


  

    
 

đầu ra

Ở đây, chúng tôi có một ví dụ về biểu mẫu

  
  
  test


  

    
 

  
  
  test


  

    
 

Sử dụng Phương pháp test 3 để xóa các trường nhập biểu mẫu trong JavaScript

Chúng tôi cũng sẽ kiểm tra một biểu mẫu để xóa đầu vào của nó bằng phương pháp

  
  
  test


  

    
 

Hướng dẫn này dạy chúng ta cách đặt lại hoặc xóa biểu mẫu bằng JavaScript. Tùy chọn này rất hữu ích cho người dùng trong trường hợp họ điền sai biểu mẫu và trước khi gửi họ mới biết về điều đó và bây giờ họ muốn xóa tất cả dữ liệu. Nếu biểu mẫu quá lớn thì việc xóa mọi thứ theo cách thủ công có thể khó khăn, vì vậy tốt hơn là sử dụng phương thức reset() của JavaScript

Phương thức reset() được xác định bằng JavaScript và chỉ cần nhấp vào nó, biểu mẫu sẽ được liên kết với phương thức onclick() của nó sẽ đặt lại mọi phần đầu vào của biểu mẫu được cung cấp

cú pháp

Chúng ta đã thấy những điều cơ bản của hàm reset(), bây giờ hãy chuyển sang cú pháp của nó –

var element = document.getElementById( Id_of_required_form ).
element.reset()

Trong cú pháp trên, “Id_of_required_form” là id của biểu mẫu mà chúng ta muốn đặt lại hoặc xóa. Chúng tôi đã sử dụng phương thức 'getElementById' của DOM để lấy biểu mẫu và lưu trữ biểu mẫu đó trong một tên biến 'phần tử'

Sau đó, bằng cách sử dụng phương thức reset(), chúng tôi đặt lại hoặc xóa biểu mẫu có phần tử id ‘Id_of_required_form’ bằng cách gọi nó

thuật toán

Chúng ta đã thấy cú pháp để đặt lại hoặc xóa một biểu mẫu bằng cách lấy phương thức id và reset() của nó, hãy xem thuật toán hoàn chỉnh từng bước để hiểu nó theo cách tốt hơn –

Tạo biểu mẫu người dùng

Trong các bước này, chúng tôi sẽ tạo biểu mẫu trong đó chúng tôi sẽ xác định hoặc tạo nhiều hộp nhập liệu để người dùng nhập liệu để điền vào biểu mẫu và một nút sẽ gọi hàm để xóa đối tượng khỏi danh sách thả xuống

• Ban đầu, chúng ta phải tạo một biểu mẫu bằng cách sử dụng

  thẻ mà chúng tôi muốn đặt lại hoặc xóa bằng cách sử dụng phương thức reset() của JavaScript

• Trong biểu mẫu, chúng tôi đã tạo một số hộp nhập liệu bằng cách sử dụng thẻ nơi người dùng có thể ghi dữ liệu

• Các không gian đầu vào này sẽ thuộc loại văn bản và số để người dùng nhập vào loại được yêu cầu

• Trong biểu mẫu sau khi xác định 'đầu vào' để lấy đầu vào của người dùng, chúng tôi sẽ xác định trường đầu vào bằng cách sử dụng thẻ và sẽ đặt nó ở dạng nút loại và chúng tôi sẽ xác định sự kiện 'onclick' sẽ gọi hàm mà chúng tôi sẽ xác định sau trong

Xác định tập lệnh hoặc chức năng cần xóa

Trong các bước này, chúng tôi sẽ xác định chức năng sẽ được gọi trong sự kiện 'onclick' của nút được xác định ở trên

• Ban đầu, chúng ta sẽ tạo một hàm bằng cách sử dụng từ khóa 'function' và đặt cho nó một cái tên sẽ được gọi trong sự kiện 'onclick'

• Trong hàm đã xác định, chúng ta sẽ tạo một biến để lưu trữ giá trị trả về từ lời gọi đến tài liệu. phương thức getElementById()’

• Chúng tôi sẽ chuyển 'id' của biểu mẫu được xác định ở trên làm tham số cho cuộc gọi đến 'tài liệu'. phương thức getElementById()’

• Bằng cách sử dụng phương thức đặt lại với biến (chứa giá trị trả về của lệnh gọi phương thức), chúng ta có thể đặt lại mọi trường đầu vào thành trống

Đây là các bước cơ bản để đặt lại hoặc xóa biểu mẫu bằng JavaScript, bây giờ hãy xem một số ví dụ để hiểu rõ hơn về các bước được xác định ở trên

Thí dụ

Trong ví dụ này, chúng ta sẽ từng bước triển khai thuật toán được xác định ở trên, hãy triển khai mã -

Trong đầu ra ở trên, chúng tôi có một biểu mẫu trong đó có một số khoảng trống đầu vào, nơi người dùng có thể cung cấp một số đầu vào và cuối cùng, có một nút đặt lại sẽ đặt lại biểu mẫu về dạng ban đầu hoặc ban đầu

Phần kết luận

Trong hướng dẫn này, chúng ta đã học phương pháp đặt lại hoặc xóa biểu mẫu HTML bằng JavaScript. Điều này chỉ có thể nếu trong khi xác định biểu mẫu HTML, lập trình viên xác định hoặc tạo một nút để người dùng đặt lại biểu mẫu nếu không người dùng phải đặt lại thủ công

Hàm reset() được xác định bằng JavaScript và chỉ cần nhấp vào biểu mẫu sẽ được liên kết với phương thức onclick() của nó sẽ đặt lại mọi phần đầu vào của biểu mẫu được cung cấp. Ngoài ra, nếu có bất kỳ giá trị được xác định trước nào cho bất kỳ đầu vào nào thì nó sẽ nhận được giá trị đó