'InternalText' hoạt động trong IE, nhưng không phải trong Firefox

Tôi có một số mã JavaScript hoạt động trong IE có chứa các mục sau:

myElement.innerText = "foo";

Tuy nhiên, có vẻ như thuộc tính 'InternalText' không hoạt động trong Firefox. Có một số Firefox tương đương? Hoặc có một thuộc tính trình duyệt chéo, chung hơn có thể được sử dụng?

Firefox sử dụng thuộc tính textContent tuân thủ W3C .

Tôi đoán Safari và Opera cũng hỗ trợ khách sạn này.

Cập nhật : Tôi đã viết một bài đăng trên blog chi tiết tất cả sự khác biệt tốt hơn nhiều.

Firefox sử dụng tiêu chuẩn W3C Node::textContent, nhưng hành vi của nó khác "hơi" so với độc quyền của MSHTML innerText(cũng được sao chép bởi Opera, một thời gian trước, trong số hàng chục tính năng MSHTML khác).

Trước hết, textContentđại diện khoảng trắng khác với innerTextmột. Thứ hai, và quan trọng hơn, textContent bao gồm tất cả các nội dung thẻ SCRIPT , trong khi InternalText thì không.

Để làm cho mọi thứ trở nên thú vị hơn, Opera - bên cạnh việc thực hiện tiêu chuẩn textContent- đã quyết định thêm MSHTML innerText nhưng thay đổi nó thànhtextContent - nghĩa là bao gồm các nội dung SCRIPT (trên thực tế textContentvà innerTexttrong Opera dường như tạo ra kết quả giống hệt nhau, có lẽ chỉ là bí danh với nhau) .

textContentlà một phần của Nodegiao diện, trong khi đó innerTextlà một phần của HTMLElement. Điều này, ví dụ, có nghĩa là bạn có thể "truy xuất" textContentnhưng không phải innerTexttừ các nút văn bản:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Cuối cùng, Safari 2.x cũng có lỗi innerTexttriển khai. Trong Safari, innerTextchỉ hoạt động đúng nếu một phần tử không bị ẩn (thông qua style.display == "none") cũng không mồ côi khỏi tài liệu. Nếu không, innerTextkết quả là một chuỗi trống.

Tôi đã chơi với sự textContenttrừu tượng (để khắc phục những thiếu sót này), nhưng hóa ra nó khá phức tạp .

Đặt cược tốt nhất của bạn là đầu tiên xác định các yêu cầu chính xác của bạn và làm theo từ đó. Nó thường có thể chỉ đơn giản là tước thẻ tắt của innerHTMLcủa một phần tử, hơn là đối phó với tất cả các khả năng textContent/ innerTextđộ lệch.

Tất nhiên, một khả năng khác là đi bộ cây DOM và thu thập các nút văn bản theo cách đệ quy.

Nếu bạn chỉ cần đặt nội dung văn bản và không truy xuất, đây là phiên bản DOM tầm thường mà bạn có thể sử dụng trên bất kỳ trình duyệt nào; nó không yêu cầu phần mở rộng bên trong IE hoặc thuộc tính textContent DOM Cấp 3.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

jQuery cung cấp một .text()phương thức có thể được sử dụng trong bất kỳ trình duyệt nào. Ví dụ:

$('#myElement').text("Foo");

Theo câu trả lời của Prakash K, Firefox không hỗ trợ thuộc tính InternalText. Vì vậy, bạn có thể chỉ cần kiểm tra xem tác nhân người dùng có hỗ trợ thuộc tính này hay không và tiến hành như sau:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

Một dòng Javascript thực sự đơn giản có thể có được văn bản "không gắn thẻ" trong tất cả các trình duyệt chính ...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

Lưu ý rằng thuộc Element::innerTexttính sẽ không chứa văn bản đã bị ẩn theo kiểu CSS " display:none" trong Google Chrome (đồng thời, nó sẽ bỏ nội dung đã bị che bởi các kỹ thuật CSS khác (bao gồm cỡ chữ: 0, màu: trong suốt và một vài hiệu ứng tương tự khác làm cho văn bản không được hiển thị theo bất kỳ cách hiển thị nào).

Các thuộc tính CSS khác cũng được xem xét:

• Đầu tiên, kiểu "display:" của các phần tử bên trong được phân tích cú pháp để xác định xem nó có phân định nội dung khối hay không (chẳng hạn như "display: block", mặc định của các phần tử khối HTML trong biểu định kiểu dựng sẵn của trình duyệt và có hành vi không bị ghi đè bởi phong cách CSS của riêng bạn); nếu vậy một dòng mới sẽ được chèn vào giá trị của thuộc tính InternalText. Điều này sẽ không xảy ra với thuộc tính textContent.
• Các thuộc tính CSS tạo nội dung nội tuyến cũng sẽ được xem xét: ví dụ: phần tử nội tuyến <br \>tạo ra một dòng mới nội tuyến cũng sẽ tạo ra một dòng mới trong giá trị của InternalText.
• Kiểu "display: inline" không tạo ra dòng mới nào trong textContent hoặc InternalText.
• Kiểu "display: table" tạo ra các dòng mới xung quanh bảng và giữa các hàng của bảng, nhưng "display: cell-cell" sẽ tạo ra một ký tự lập bảng.
• Thuộc tính "vị trí: tuyệt đối" (được sử dụng với display: block hoặc display: inline, không thành vấn đề) cũng sẽ khiến ngắt dòng được chèn vào.
• Một số trình duyệt cũng sẽ bao gồm một khoảng cách duy nhất giữa các nhịp

Nhưng Element::textContentvẫn sẽ chứa TẤT CẢ nội dung của các thành phần văn bản bên trong một cách độc lập với CSS được áp dụng ngay cả khi chúng không nhìn thấy được. Và không có dòng mới hoặc khoảng trắng sẽ được tạo trong textContent, mà chỉ bỏ qua tất cả các kiểu và cấu trúc và nội tuyến / khối hoặc các loại phần tử bên trong.

Thao tác sao chép / dán bằng cách chọn chuột sẽ loại bỏ văn bản ẩn ở định dạng văn bản đơn giản được đặt trong bảng tạm, do đó, nó sẽ không chứa mọi thứ trong đó textContent, mà chỉ chứa những gì bên trong innerText(sau khi tạo khoảng trắng / dòng mới như trên) .

Cả hai thuộc tính sau đó được hỗ trợ trong Google Chrome, nhưng nội dung của chúng có thể khác nhau. Các trình duyệt cũ hơn vẫn được bao gồm trong innetText mọi thứ như textContent hiện có (nhưng hành vi của chúng liên quan đến việc tạo ra các khoảng trắng / dòng mới không nhất quán).

jQuery sẽ giải quyết những mâu thuẫn này giữa các trình duyệt bằng cách sử dụng phương thức ".text ()" được thêm vào các phần tử được phân tích cú pháp mà nó trả về thông qua truy vấn $ (). Trong nội bộ, nó giải quyết những khó khăn bằng cách xem xét HTML DOM, chỉ hoạt động với cấp độ "nút". Vì vậy, nó sẽ trả về một cái gì đó trông giống như textContent tiêu chuẩn.

Thông báo trước là phương thức jQuery này sẽ không chèn thêm bất kỳ khoảng trắng hoặc ngắt dòng nào có thể hiển thị trên màn hình do các phần phụ (như <br />) của nội dung gây ra.

Nếu bạn thiết kế một số tập lệnh cho khả năng truy cập và biểu định kiểu của bạn được phân tích cú pháp để hiển thị phi âm thanh, chẳng hạn như các plugin được sử dụng để giao tiếp với trình đọc chữ nổi, công cụ này nên sử dụng textContent nếu nó phải bao gồm các dấu chấm câu cụ thể được thêm vào trong các nhịp được tạo kiểu "display: none" và thường được bao gồm trong các trang (ví dụ: siêu ký tự / đăng ký), nếu không, phần bên trong sẽ rất khó hiểu trên đầu đọc chữ nổi.

Các văn bản bị ẩn bởi các thủ thuật CSS hiện thường bị các công cụ tìm kiếm lớn bỏ qua (cũng sẽ phân tích CSS các trang HTML của bạn và cũng sẽ bỏ qua các văn bản không có màu tương phản trên nền) bằng cách sử dụng trình phân tích cú pháp HTML / CSS và thuộc tính DOM "InternalText" chính xác như trong các trình duyệt trực quan hiện đại (ít nhất nội dung vô hình này sẽ không được lập chỉ mục để văn bản ẩn có thể được sử dụng như một mẹo để buộc đưa một số từ khóa vào trang để kiểm tra nội dung của nó); nhưng văn bản ẩn này sẽ được hiển thị trong trang kết quả (nếu trang vẫn đủ điều kiện từ chỉ mục được đưa vào kết quả), sử dụng thuộc tính "textContent" thay vì HTML đầy đủ để loại bỏ các kiểu và tập lệnh bổ sung.

NẾU bạn chỉ định một số văn bản đơn giản trong bất kỳ một trong hai thuộc tính này, điều này sẽ ghi đè lên đánh dấu bên trong và các kiểu được áp dụng cho nó (chỉ phần tử được gán sẽ giữ kiểu, thuộc tính và kiểu), do đó cả hai thuộc tính sẽ chứa cùng một nội dung . Tuy nhiên, một số trình duyệt giờ đây sẽ không còn tôn trọng việc ghi vào bên trong nữa và sẽ chỉ cho phép bạn ghi đè lên thuộc tính textContent (bạn không thể chèn đánh dấu HTML khi ghi vào các thuộc tính này, vì các ký tự đặc biệt HTML sẽ được mã hóa chính xác bằng cách sử dụng tham chiếu ký tự số để xuất hiện theo nghĩa đen , nếu sau đó bạn đọc innerHTMLtài sản sau khi chuyển nhượng innerTexthoặc textContent.

myElement.innerText = myElement.textContent = "foo";

Chỉnh sửa (cảm ơn Mark Amery cho nhận xét bên dưới): Chỉ thực hiện theo cách này nếu bạn biết ngoài nghi ngờ hợp lý rằng sẽ không có mã nào dựa vào việc kiểm tra sự tồn tại của các thuộc tính này, như (ví dụ) jQuery làm. Nhưng nếu bạn đang sử dụng jQuery, có lẽ bạn chỉ cần sử dụng hàm "text" và thực hiện $ ('# myEuity'). Text ('foo') như một số câu trả lời khác hiển thị.

innerTextđã được thêm vào Firefox và sẽ có sẵn trong bản phát hành FF45: https://ormszilla.mozilla.org/show_orms.cgi?id=264412

Một thông số dự thảo đã được viết và dự kiến ​​sẽ được đưa vào tiêu chuẩn sống HTML trong tương lai: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Lưu ý rằng hiện tại các triển khai Firefox, Chrome và IE đều không tương thích. Trong tương lai, có lẽ chúng ta có thể mong đợi Firefox, Chrome và Edge hội tụ trong khi IE cũ vẫn không tương thích.

Xem thêm: https://github.com/whatwg/compat/issues/5

Những gì như thế này?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** Tôi cần phải làm cho chữ hoa của tôi.

Như năm 2016 từ Firefox v45, innerTexthoạt động trên firefox, hãy xem hỗ trợ của nó: http://caniuse.com/#search=innerText

Nếu bạn muốn nó hoạt động trên các phiên bản Firefox trước, bạn có thể sử dụng textContent, hỗ trợ tốt hơn trên Firefox nhưng tệ hơn trên các phiên bản IE cũ hơn : http://caniuse.com/#search=textContent

Điều này đã được kinh nghiệm của tôi với innerText, textContent, innerHTML, và giá trị:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

tức là = internet explorer, ff = firefox, ch = google chrome. lưu ý 1: ff hoạt động cho đến khi giá trị bị xóa bằng backspace - xem ghi chú của Ray Vega ở trên. lưu ý 2: hoạt động phần nào trong chrome - sau khi cập nhật, nó không thay đổi, sau đó bạn nhấp đi và nhấp lại vào trường và giá trị xuất hiện. Tốt nhất của lô là elem.value = changeVal; mà tôi đã không bình luận ở trên.

Chỉ cần đăng lại từ các bình luận dưới bài viết gốc. InternalHTML hoạt động trong tất cả các trình duyệt. Cảm ơn stefita.

myEuity.innerHTML = "foo";

tìm thấy ở đây:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

Cũng có thể mô phỏng innerTexthành vi trong các trình duyệt khác:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }