Html5 ngày càng hướng thân thiện với người dùng hơn. Thẻ div với contenteditable sinh ra cũng có chung mục đích như vậy. Nó giúp người dùng có thể viết trực tiếp trên trình duyệt mà ngày xưa các developer phải cài firebug mới dùng được.
Việc khai báo vô cùng đơn giản:
Ở bài này, mình muốn giới thiệu về 1 số thứ sử dụng với thẻ này.
1. Copy and Paste tới thẻ contenteditable
$(document).on('paste', '.input-edit', function (event) {
event.preventDefault();
var text;
var clp = (event.originalEvent || event).clipboardData;
if (clp === undefined || clp === null) {
text = window.clipboardData.getData("text") || "";
text = convertTextExceptEmTag(text);
if (text !== "") {
if (window.getSelection) {
var newNode = document.createTextNode(text);
window.getSelection().getRangeAt(0).insertNode(newNode);
} else {
document.selection.createRange().pasteHTML(text);
}
}
} else {
text = clp.getData('text/plain') || "";
text = convertTextExceptEmTag(text);
if (text !== "") {
document.execCommand('insertText', false, text);
}
}
});
function convertTextExceptEmTag(html) {
return html.replace(/<(?!(em|\/em)\s*\/?)[^>]+>/g, '').replace(/(\r\n|\n|\r)/gm," ");
}
Đoạn code thứ 2 có 2 mục đích:
– Khi bạn copy 1 đoạn html, nó sẽ chứa các thẻ html, replace(/<(?!(em|\/em)\s*\/?)[^>]+>/g, '') có tác dụng xóa bỏ các thẻ này đi ngoại trừ các thẻ dạng , . Bạn muốn không xóa thẻ nào thì thêm vào trong (em|\/em) này, lưu ý là với những thẻ đóng dạng thì cần dấu “\” để regexp có thể hiểu được vì nó là kí tự đặc biệt. – replace(/(\r\n|\n|\r)/gm," ") có mục đích xóa hết các thành phần xuống dòng chuyển thành dấu space.
Về đoạn code 1:
– Trước khi dùng cần phải import thư viện jquery
– Nó có tác dụng override chức năng paste của trình duyệt. Ở đây là lắng nghe việc PASTE vào thẻ có class input-edit
– Dòng tiếp theo là ngăn chặn việc PASTE mặc định của trình duyệt
– Dòng tiếp là khai báo biến, lấy clipboardData
– clipboardData có tác dụng lấy dữ liệu từ việc copy, tiếp theo là fix lỗi trên IE. Thằng dở hơi luôn muốn mình khác biệt.
– Với ie thì cần làm 1 số lệnh để lấy vị trí con trỏ, tạo ra 1 TextNode còn các trình duyệt khác đơn giản thì gọi lệnh insertText của trình duyệt
2. Chặn bấm enter vào thẻ
$(document).on('keypress', '.input-edit', function (event) { return event.which != 13; });
3. Có thể cho thẻ xuống dòng:
Thêm css: display: “flex”
