Hướng dẫn how do you edit text in javascript? - làm thế nào để bạn chỉnh sửa văn bản trong javascript?

Xem Phần 8D và 8E của cuốn sách để giải thích các phương pháp và thuộc tính được sử dụng trong tập lệnh này.

Textarea hoạt động kỳ lạ trong Explorer 5 trên Mac: nó rơi vào các yếu tố khác, thay vì kéo dài trang và ban đầu không phải tất cả văn bản được hiển thị. Di chuyển chuột lên để xem tất cả các văn bản. Nó cũng không đăng ký trở lại khó khăn.

Explorer và Opera từ chối chấp nhận các yếu tố cấp khối bên trong các đoạn thử nghiệm.

Trên trang này, tôi cung cấp một tập lệnh để cập nhật một trang có thể rất hữu ích trong hệ thống quản lý nội dung. Nhấp vào bất kỳ đoạn văn nào và bạn có thể chỉnh sửa văn bản. Khi bạn hoàn thành, nhấn nút và văn bản mới hiển thị bình thường.

Thí dụ

Toàn bộ trang này là ví dụ. Nhấp vào bất kỳ đoạn nào, chỉnh sửa nó, sau đó nhấn 'Sẵn sàng'. Thay đổi của bạn sẽ hiển thị trong trang.

Các vấn đề

Trước hết tôi gặp phải. Tôi muốn sử dụng Textarea làm trường chỉnh sửa. Đầu tiên tôi không nhận được nội dung vào TextArea. Một người đọc cảnh báo đã phát hiện ra rằng Mozilla cần

	var butt = document.createElement('BUTTON');

6 được đặt sau khi chèn Textarea vào tài liệu.

Ngoài ra, nội dung không bao gồm độc đáo trong Mozilla, nó vẫn giữ được lợi nhuận khó từ mã nguồn. Tôi đã thử nghiệm một số giá trị của thuộc tính

	var butt = document.createElement('BUTTON');

7, nhưng không làm gì cho kết quả tốt nhất cuối cùng.

Vấn đề tồi tệ nhất là gửi văn bản thay đổi trở lại máy chủ, điều mà bất kỳ hệ thống quản lý nội dung nào cũng muốn làm. Độc giả đã gửi cho tôi nhiều gợi ý khéo léo để làm điều này. Tuy nhiên, vì nó không thể được thực hiện thông qua JavaScript (tuy nhiên), tôi không xử lý giải pháp cho vấn đề này trên trang web của mình. Vì vậy, xin đừng gửi thư cho tôi rằng bạn đã tìm thấy cách này hoặc cách đó để làm điều đó: chắc chắn là có thể, nhưng tôi chỉ quan tâm đến một giải pháp JavaScript thuần túy mà không có bất kỳ tập lệnh phía máy chủ nào.
Readers have sent me various ingenious suggestions to do this. However, since it cannot be done through JavaScript (yet) I don’t treat the solution to this problem on my site. So please don't mail me that you found this or that way to do it: it's certainly possible, but I'm only interested in a pure JavaScript solution without any server side scripts.

Kịch bản

var editing  = false;

if (document.getElementById && document.createElement) {
	var butt = document.createElement('BUTTON');
	var buttext = document.createTextNode('Ready!');
	butt.appendChild(buttext);
	butt.onclick = saveEdit;
}

function catchIt(e) {
	if (editing) return;
	if (!document.getElementById || !document.createElement) return;
	if (!e) var obj = window.event.srcElement;
	else var obj = e.target;
	while (obj.nodeType != 1) {
		obj = obj.parentNode;
	}
	if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
	while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
		obj = obj.parentNode;
	}
	if (obj.nodeName == 'HTML') return;
	var x = obj.innerHTML;
	var y = document.createElement('TEXTAREA');
	var z = obj.parentNode;
	z.insertBefore(y,obj);
	z.insertBefore(butt,obj);
	z.removeChild(obj);
	y.value = x;
	y.focus();
	editing = true;
}

function saveEdit() {
	var area = document.getElementsByTagName('TEXTAREA')[0];
	var y = document.createElement('P');
	var z = area.parentNode;
	y.innerHTML = area.value;
	z.insertBefore(y,area);
	z.removeChild(area);
	z.removeChild(document.getElementsByTagName('button')[0]);
	editing = false;
}

document.onclick = catchIt;

Giải trình

Chúng tôi đặt một lá cờ

	var butt = document.createElement('BUTTON');

8 thành sai. Điều này cho thấy người dùng hiện đang chỉnh sửa một đoạn văn. Ban đầu anh ấy không phải là, tất nhiên.

var editing  = false;

Tạo nút

Sau đó, chúng tôi tạo nút 'sẵn sàng' mà chúng tôi sẽ cần nhiều lần. Đối với điều này, chúng tôi cần tập lệnh nâng cao nhất, vì vậy trước tiên một số phát hiện đối tượng:

if (document.getElementById && document.createElement) {

Nếu đây là trình duyệt hiện đại, hãy tạo nút nút

	var butt = document.createElement('BUTTON');

và văn bản của nó

	var buttext = document.createTextNode('Ready!');

Nối văn bản vào nút để nó được hiển thị

	butt.appendChild(buttext);

Cuối cùng, thêm một sự kiện onclick gọi hàm

	var butt = document.createElement('BUTTON');

9.

	butt.onclick = saveEdit;
}

Nút hiện nằm trong biến

	var buttext = document.createTextNode('Ready!');

0. Chúng ta có thể gọi nó nếu chúng ta cần nó.

P đến Textarea

Sau đó, chúng tôi sẽ xác định một sự kiện onclick chung cho toàn bộ trang. Tất cả các sự kiện này được gửi đến chức năng

	var buttext = document.createTextNode('Ready!');

1.

function catchIt(e) {

Trước hết, hãy kiểm tra xem người dùng hiện đang chỉnh sửa một đoạn văn. Nếu anh ta (

	var butt = document.createElement('BUTTON');

8 là đúng) kết thúc chức năng.

	if (editing) return;

Hỗ trợ phát hiện.

	if (!document.getElementById || !document.createElement) return;

Sau đó, chúng tôi tìm thấy mục tiêu của sự kiện,

var editing  = false;

0

Bây giờ chúng ta có mục tiêu, nhưng một vấn đề là Mozilla coi nút văn bản (và không chứa P) là mục tiêu. Do đó, chúng tôi đi qua cây Dom miễn là nút hiện tại không phải là một thẻ (miễn là NodeType của nó không phải là 1).

var editing  = false;

1

Bây giờ chúng tôi đã kết thúc với một thẻ. Nếu đây là thẻ textarea, người dùng đã nhấp vào hộp chỉnh sửa để chỉnh sửa văn bản. Nếu đó là một liên kết, nó sẽ có thể nhấp như bình thường. Trong những trường hợp này không có gì nên xảy ra nên chúng tôi kết thúc chức năng.

var editing  = false;

2

Một lần nữa, chúng tôi đi qua cây Dom để tìm thẻ P hoặc HTML là tổ tiên cuối cùng của mục tiêu của nhấp chuột.

var editing  = false;

3

Nếu chúng tôi tìm thấy thẻ HTML, người dùng đã nhấp vào bên ngoài một đoạn văn và không có gì xảy ra. Chúng tôi kết thúc chức năng.

var editing  = false;

4

Sau khi kiểm tra này, cuối cùng chúng tôi chắc chắn rằng người dùng đã nhấp vào một đoạn văn và anh ấy muốn chỉnh sửa nó. Lấy bên trong của đoạn văn và lưu trữ nó.

var editing  = false;

5

Tạo một phần tử Textarea mới và lưu trữ nó.

var editing  = false;

6

Sau đó lấy nút cha mẹ của đoạn văn.

var editing  = false;

7

Tình hình bây giờ là:

var editing  = false;

8

Chèn Textarea mới ngay trước đoạn văn trong nút cha của nó.

var editing  = false;

9

Làm tương tự cho nút 'Sẵn sàng'.

if (document.getElementById && document.createElement) {

0

Bây giờ cây trông như thế này:

if (document.getElementById && document.createElement) {

1

Loại bỏ các đoạn văn. Bây giờ có vẻ như Textarea và Nút đã thay thế cho đoạn văn.

if (document.getElementById && document.createElement) {

2

Chỉ bây giờ, sau khi chèn nó, chúng ta có thể đặt HTML bên trong của P vào Textarea. Làm điều này trước khi chèn là không thể ở Mozilla.

if (document.getElementById && document.createElement) {

3

Tập trung vào TextArea để thuận tiện cho người dùng

if (document.getElementById && document.createElement) {

4

và đặt

	var butt = document.createElement('BUTTON');

8 thành True: Người dùng đang bận chỉnh sửa.

if (document.getElementById && document.createElement) {

5

Textarea đến p

Khi người dùng nhấp vào nút 'Sẵn sàng', chúng ta sẽ làm ngược lại.Hàm

	var butt = document.createElement('BUTTON');

9 chăm sóc mọi thứ.

if (document.getElementById && document.createElement) {

6

Nhận TextArea (giả định này chỉ có một trường như vậy trong toàn bộ trang).

if (document.getElementById && document.createElement) {

7

Tạo một đoạn văn mới và lưu trữ nó.

if (document.getElementById && document.createElement) {

8

Tìm nút cha của Textarea: đoạn văn phải được thêm vào nó.

if (document.getElementById && document.createElement) {

9

Đặt bên trong của đoạn mới thành giá trị của textarea.

	var butt = document.createElement('BUTTON');

0

Sau đó chèn đoạn mới ngay trước Textarea.

	var butt = document.createElement('BUTTON');

1

Loại bỏ textarea.

	var butt = document.createElement('BUTTON');

2

Xóa nút 'Sẵn sàng' (một lần nữa, giả sử rằng chỉ có một nút trên trang).

	var butt = document.createElement('BUTTON');

3

Cuối cùng, đặt

	var butt = document.createElement('BUTTON');

8 thành FALSE: Người dùng đã ngừng chỉnh sửa.

	var butt = document.createElement('BUTTON');

4

Biến cố

Bên ngoài và sau các chức năng, đặt một sự kiện onclick chung cho toàn bộ trang gọi chức năng

	var buttext = document.createTextNode('Ready!');

1:

	var butt = document.createElement('BUTTON');

5