Văn bản ẩn có thể được chọn trong IE mặc dù style = 'display: none'

Question

Điều này có vẻ là một tính năng cụ thể của IE. Tôi đã thử nghiệm bằng IE8. Người dùng đã đóng góp bằng cách xác nhận trong IE6 và IE7.

Tôi có một số văn bản đó được xây dựng vào trang web của tôi và từ đầu sáng tạo của phần tử nó có style = "display: none;"

tôi không sử dụng jQuery để ẩn các văn bản và văn bản không được 'hiển thị'. Mặc dù, để tiết lộ thêm, tôi truy cập nội dung của phần tử bằng cách sử dụng phương thức .html() của jQuery.

Tuy nhiên, nếu người dùng chọn văn bản lân cận phần tử display:none của tôi và sao chép nội dung đã được chọn, văn bản ẩn sẽ được đưa vào. Như thể nó đã được hiển thị bình thường.

Các đánh dấu trông như thế này:

... 
<td align="left"> 
    Text they should see 
    <div id="whateverButUnique" style="display:none;">Value I want hidden</div> 
    Some other text 
</td> 

Đây là một fiddle nơi tôi có thể tạo lại vấn đề bằng cách sử dụng IE < 9.

Trong khi đây không phải là một mối quan tâm nghiêm trọng cho các ứng dụng đặc biệt này, nó bắt tôi mất cảnh giác và tôi tự hỏi liệu đây có phải là một 'tính năng' hay nếu tôi làm điều gì đó không chính xác.

Hầu hết các số other questions Tôi đã xem về display:none có nội dung áp phích của họ hiển thị. Một lần nữa, nội dung của tôi về bản chất là vô hình cho đến khi được chọn, sao chép và cuối cùng được dán.

Tôi có thể ngăn người dùng Internet Explorer tìm thấy nội dung này bằng cách sao chép/dán không? Tôi nhận ra rằng họ có thể nhìn thấy nó trong Công cụ dành cho nhà phát triển và bằng cách xem nguồn.

Cập nhật: nhờ nhận xét của người dùng khác, tôi cũng đã thử áp dụng kiểu visibility:hidden và z-index=-1. Người dùng đã cố gắng rất nhiều nỗ lực ẩn khác nhưng IE là cho đến nay ngoan cường tại cho phép tính năng này để trượt qua. Cảm ơn vì tất cả những ý tưởng tuyệt vời!

Cập nhật: Cảm ơn bạn đã hỏi Heather Walters; các giá trị mà tôi cần sử dụng trên trang chỉ khả dụng ở phía máy chủ nhưng sau đó tôi sử dụng chúng sau khi tải trang để tạo liên kết bằng cách xử lý thêm từ chương trình bên ngoài thông qua jQuery/AJAX. Vì vậy, tôi xây dựng trang với các giá trị ẩn nhưng bao gồm và sau đó hoạt động trên những giá trị ẩn để xây dựng một cái gì đó hữu ích với họ.

Một khi tôi đã hoàn thành việc sử dụng chúng để xây dựng một cái gì đó hữu ích, tuy nhiên, bây giờ tôi nhận ra rằng tôi có thể xóa sạch tất cả chúng thông qua jQuery và có thêm hiệu suất. Mã sau đây sẽ thực hiện việc này cho tất cả mọi người đã bật javascript:

$("[id^=whateverButUnique]").html(""); 

Với khả năng hàng trăm thành phần trên trang xử lý bổ sung này không lý tưởng.

vega, tôi không tin rằng this solution sẽ hoạt động đối với tôi vì tôi phải tạo trang và nội dung ẩn của mình ở phía máy chủ.Tất cả chúng đều được xây dựng trong một vòng lặp phía máy chủ với hàng trăm yếu tố khác, vì vậy tôi có thể lựa chọn để xây dựng nó trong khi máy chủ đang sắp xếp mọi thứ trong một bảng (với phần tử ẩn đi kèm) hoặc lặp lại nó lần thứ hai (đau đớn) và cố gắng buộc các yếu tố để hiển thị: không có nơi nào đó ít có khả năng được lựa chọn.

Ohgodwhy, tôi muốn tin tưởng vào giải pháp của bạn. Trong IE8, trường ẩn không xuất hiện trong notepad; tuy nhiên, tôi đã có thể sao chép phần và dán nó vào Microsoft Word. Nó không còn bị ẩn nữa.

Một yếu tố khác trong công việc: trang này đã khá javascript nặng nên tôi đã hy vọng tôi có thể tìm ra giải pháp ngăn IE xem các giá trị mà không cần thêm một mã khác thông qua hơn 100 yếu tố tiềm năng ... đến.

Cập nhật: gợi ý Robin Maben 's có vẻ như nó sẽ là một lớn workaround! Đề xuất của anh ta là ẩn các giá trị trong thuộc tính HTML5 tùy chỉnh data-x. Điều này dường như hoạt động mặc dù trang có khả năng tương thích với HTML5 (rất có thể) của tôi. Vui lòng bỏ phiếu cho câu trả lời của mình nếu bạn cũng coi đó là một đóng góp có giá trị.

Cập nhật: Đã xác nhận. Tôi đã triển khai thành công đề xuất của Maben và do đó đã có thể giảm số lần tra cứu DOM - một cho mọi phần tử trên trang của tôi. Tôi đã lặp qua tất cả các DIV với các mục mà tôi muốn hiển thị và bây giờ tôi có thể tự động truy cập vào thuộc tính dữ liệu cùng một lúc. Điều này có vẻ như thế này trong quá trình triển khai của tôi:

<div style="display:none" data-call-number="..." id="stackLocatorLinkFillUp...">...</div> 

Dấu ba chấm biểu thị các hoạt động độc nhất đang diễn ra. Các id có một chỉ số số đơn giản mà increments một bản ghi.

// Loop through all of the items on the page that start with my id 
$("[id^=stackLocatorLinkFillUp]").each(function() { 
    // ... 
    // Grab the contents of the div 
    var innerContent = $(this).html(); 
    // Extract the call number out of the data-call-number field 
    var callNumPreEncoded = $(this).data("callNumber"); 
    // ...eventually... 
    $(this).html(...).css("display","block"); 
}); 

Xin cảm ơn tất cả mọi người!

Answer 1

Hiển thị kích thước và vị trí của phần tử không quan trọng, nó được chọn vì khi bạn chọn mọi thứ trong IE < 9, bạn đang chọn html và sau đó dán html đó, với các yếu tố ẩn. IE9 và các trình duyệt khác loại bỏ đúng các yếu tố ẩn đó khỏi vùng chọn. Cách duy nhất tôi biết của để ngăn chặn nó là không có các yếu tố ẩn trong dom.

Answer 2

Tôi nghĩ sẽ tốt hơn nếu bạn sử dụng:

position: absolute; left: -10000px; 

Điều đó sẽ loại bỏ bất kỳ vấn đề tiềm tàng IE.

Answer 3

Bạn đã thử thuộc tính visibility:collapse?

Nếu phần "Value I want hidden" được sử dụng hoàn toàn cho mục đích tính toán, bạn nên sử dụng thuộc tính "data".

Như thế này

<div data-custom-value="1001">Visible value </div> 

Trong jQuery, HTML thuộc tính dữ liệu tự động có sẵn thông qua data() api.

Bạn có thể làm

someElement.data('customValue') để đọc giá trị.

và

someElement.data('customValue', newValue) để đặt giá trị.

Hy vọng tôi đã phân tích vấn đề của bạn một cách chính xác.