Tìm hiểu cách đặt nội dung trang web dưới dạng có thể chỉnh sửa cho khách truy cập trang web

Sử dụng thuộc tính có thể chỉnh sửa được

Làm cho văn bản trên trang web có thể chỉnh sửa được bởi người dùng dễ dàng hơn bạn mong đợi. HTML cung cấp một thuộc tính cho mục đích này: có thể chỉnh sửa được.

Thuộc tính contenteditable được giới thiệu lần đầu tiên vào năm 2014 với việc phát hành HTML5 . Nó chỉ định liệu nội dung mà nó chi phối có thể được thay đổi bởi khách truy cập trang web từ bên trong trình duyệt hay không.

Hỗ trợ cho thuộc tính có thể chỉnh sửa được

Hầu hết các trình duyệt máy tính để bàn hiện đại đều hỗ trợ thuộc tính.

Bao gồm các:

Cũng vậy với hầu hết các trình duyệt di động.

Cách sử dụng Contenteditable

Chỉ cần thêm thuộc tính vào phần tử HTML mà bạn muốn chỉnh sửa. Nó có ba giá trị có thể: đúng, sai và kế thừa. Inherit là giá trị mặc định, có nghĩa là phần tử này lấy giá trị của parent của nó. Tương tự như vậy, bất kỳ yếu tố con nào của nội dung mới có thể chỉnh sửa của bạn cũng sẽ có thể chỉnh sửa trừ khi bạn thay đổi giá trị thành false. Ví dụ: để làm cho phần tử DIV có thể chỉnh sửa, hãy sử dụng:

Tạo danh sách việc cần làm có thể chỉnh sửa với nội dung có thể chỉnh sửa

Nội dung có thể chỉnh sửa có ý nghĩa nhất khi bạn ghép nối nội dung với bộ nhớ cục bộ, do đó nội dung vẫn tồn tại giữa các phiên và lượt truy cập trang web.

  1. Mở trang của bạn trong trình chỉnh sửa HTML.
  2. Tạo một danh sách có dấu đầu dòng, không có thứ tự có tên myTasks :

    • Một số tác vụ
    • Công việc khác
  1. Thêm thuộc tính contenteditable vào phần tử
      :
      Giờ đây, bạn có danh sách việc cần làm có thể chỉnh sửa — nhưng nếu bạn đóng trình duyệt hoặc rời khỏi trang, danh sách của bạn sẽ biến mất. Giải pháp: Thêm một kịch bản lệnh đơn giản để lưu các tác vụ vào localStorage.
    • Thêm liên kết vào jQuery trong của tài liệu của bạn.