Phát hiện xem phần tử có hiển thị hay không (không sử dụng jquery)

Tôi đang cố gắng phát hiện xem phần tử html tôi đã cung cấp có hiển thị hay không mà không cần sử dụng jquery.Phát hiện xem phần tử có hiển thị hay không (không sử dụng jquery)

Bối cảnh:

Trong Trang mật khẩu người dùng quên, tôi có một hình thức mà người dùng nhập tên đăng nhập và nhấp chuột mình vào nộp. Sau đó, nếu anh ta đặt một câu hỏi chalenge, nó sẽ được hiển thị và anh ta sẽ có thể trả lời câu hỏi này và gửi lại. (cùng một nút trước).

Vấn đề của tôi:

khi người dùng nhấp vào gửi, trong IE, nếu anh ta nhấp chuột vào nó nhiều lần, anh ta sẽ nhận được một e-mail cho mỗi lần ông nhấp chuột vào nó.

Những gì tôi nghĩ:

Tôi muốn vô hiệu hóa các nút sau khi nhấp vào nút này gửi, nhưng tôi chỉ có thể vô hiệu hóa nó nếu hai điều kiện là chính xác:

Nếu người dùng có đã đã gửi tên đăng nhập của mình (không có lỗi).
người dùng có câu hỏi chalenge đã đăng ký và anh ấy đã trả lời đúng.

Tôi không thể thay đổi quá trình này được thực hiện, vì vậy tôi đã nghĩ về việc thêm id vào trường câu trả lời và kiểm tra xem nó có hiển thị hay không. nếu có và người dùng nhấp vào nút gửi, tôi muốn áp dụng nút tắt thuộc tính trên nhãn. Những gì tôi không biết là làm thế nào để làm điều này mà không cần sử dụng jquery.

với jQuery tôi có thể làm một cái gì đó như thế này:

if($('#secretAns').is(':visible')) { 
    //i think it could be the solution 
    $('#general_Submit.Label').attr(disabled, disabled); 

}

để áp dụng trên:

<div id="secretAns" class="loginTxtFieldWrapper"> 
    <font color='red'>*</font><input type="text" name="secretAns" /> 
    <input type="hidden" name="isAnswerPage" value="1"/> 
</div> 
<p id="loginSubmitLink"> 
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" /> 
</p>

tôi thấy khó có thể tìm kiếm giải pháp javascript tinh khiết, bởi vì tất cả mọi người có xu hướng sử dụng jquery, và tôi không thể sử dụng nó trong ứng dụng của tôi, vì vậy nếu ai đó có thể giúp tôi làm điều này với javascript tinh khiết, tôi sẽ đánh giá cao.

Nguồn

2013-01-02 periback2

Kiểm tra mã nguồn của jQuery và xem họ đang làm gì với công cụ chọn ': visible'. – gdoron

bản sao có thể có của [Javascript: Cách kiểm tra xem phần tử có hiển thị không?] (Http://stackoverflow.com/questions/11391452/javascript-how-to-check-if-element-is-visible) – xyz

@Ajinkya, bạn nhận thấy rằng "trùng lặp" là một câu hỏi jQuery, phải không? – gdoron

của Google đã giúp tôi tìm ra cách jQuery hiện nó, bạn có thể làm tương tự:

Trong jQuery 1.3.2 một yếu tố có thể nhìn thấy nếu nó trình duyệt báo cáo offsetWidth hoặc offsetHeight lớn hơn 0.

Release notes

Tìm kiếm mã nguồn đã cho tôi điều này:

// The way jQuery detect hidden elements, and the isVisible just adds "!". 
elem.offsetWidth === 0 && elem.offsetHeight === 0

Nguồn

2013-01-02 12:37:15 gdoron

Chỉ cần FYI: Tôi Upvoted :) – xyz

@gdoron, shot đẹp! nó thực sự là cách ... Tôi sẽ tìm ra giải pháp và xuất bản ở đây khi tôi tìm thấy nó. Cảm ơn. +1 – periback2

Tôi đã thêm câu trả lời của mình chỉ để hiển thị giải pháp cho vấn đề của mình, nhưng câu trả lời cho tiêu đề câu hỏi của tôi có thể là câu trả lời của bạn. Tôi chỉ không hiểu làm thế nào offsetwidth hoặc offsetheight được. Tôi đã hiểu cách kiểm tra khả năng hiển thị, nhưng tôi vẫn sẽ tìm kiếm thêm về nó. cảm ơn rất nhiều – periback2

Nói chung_Submit.nút Label bấm gọi một hàm Callfun() và sau đó nút khuyết tật

<input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" /> 

    function Callfun() 
    { 
    document.getElementById("general_Submit.Label").disabled = true; 
    }

Nguồn

2013-01-02 12:44:47

Vui lòng xem đó là phong tục ít khi đang có thể có ích

<!DOCTYPE html> 
<html> 
<body> 
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser. 
</div> 

<div id="two" style="visibility: visible;"> I'm Cool 
</div> 

<div onclick="push();"> Click me </div> 
<script> 
function push() { 
a = document.getElementById("one").style.visibility; 
alert("one "+a); 

b = document.getElementById("two").style.visibility; 
alert("one "+b); 
} 
</script> 
</body> 
</html>

trên mã cho tình trạng tầm nhìn của div sử dụng nó là ID như U yêu cầu.

Nguồn

2013-01-02 12:45:51

Không chỉ có 'style.visibilty'. – gdoron

bạn có thể đặt biến truy cập hiển thị và sử dụng nó như thể (visible_counter) và làm theo phần còn lại của mã. –

trên thực tế style.visibility trả về null nếu thuộc tính không được đặt (tôi nghĩ đây là lý do), trong khi .offsetWidth trả về null nếu nó không hiển thị và nếu nó hiển thị, nó trả về giá trị dương. Vì vậy, tôi tin rằng @gdoron là cách tốt nhất – periback2

Khi tôi đang suy nghĩ về việc vô hiệu hóa nút, tôi ở đây để viết rằng tôi đã sai về ý tưởng của tôi về giải pháp cho vấn đề này, bởi vì nó sẽ thực sự tốn kém để làm cho nó hoạt động. Bằng cách này, sau khi nghiên cứu, thử nghiệm một số ý tưởng và đọc các ý tưởng @gdoron và @AmeyaRote mang lại, tôi đã tìm ra giải pháp đơn giản là ẩn nút 'gửi' sau khi nhấp vào nó (trang được làm mới, xác thực được kiểm tra và nút có sẵn một lần nữa sau quá trình này). Vì vậy, đây là giải pháp để giải quyết vấn đề nhằm tránh người dùng nhấp nhiều lần vào nút gửi, đối với trường hợp cụ thể này, tôi không thể vô hiệu hóa nó (nếu tôi vô hiệu hóa sau khi nhấp vào, biểu mẫu không được gửi):

HTML

tôi chỉ cần thêm thuộc tính onclick gọi một hàm javascript tôi tạo ra để ẩn nút:

<p id="loginSubmitLink"> 
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" /> 
</p>

các Javascript

function avoidDoubleSubmit() { 
    <c:if test="${not empty secretQues}"> 
     event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();}); 
     document.getElementById('general_Submit.Label').style.display ='none'; 
    </c:if> 
}

Nguồn

2013-01-03 10:58:27 periback2

Tôi đã viết lại thời gian này một chút. Điều này xử lý rất nhiều trường hợp với kiến thức của tôi. Điều này thực sự kiểm tra xem phần tử có đang được người dùng nhìn thấy ở trạng thái hiện tại hay không.

Kiểm tra hiển thị, khả năng hiển thị, độ mờ đục, quăng tràn và thực hiện đệ quy cho đến khi chúng tôi đi đến nút tài liệu.

function isVisible(el) { 
     while (el) { 
      if (el === document) { 
       return true; 
      } 

      var $style = window.getComputedStyle(el, null); 

      if (!el) { 
       return false; 
      } else if (!$style) { 
       return false; 
      } else if ($style.display === 'none') { 
       return false; 
      } else if ($style.visibility === 'hidden') { 
       return false; 
      } else if (+$style.opacity === 0) { 
       return false; 
      } else if (($style.display === 'block' || $style.display === 'inline-block') && 
       $style.height === '0px' && $style.overflow === 'hidden') { 
       return false; 
      } else { 
       return $style.position === 'fixed' || isVisible(el.parentNode); 
      } 
     } 
    }

Nguồn

2017-06-18 06:48:18 gauravmuk

Phát hiện xem phần tử có hiển thị hay không (không sử dụng jquery)

Trả lời

Các vấn đề liên quan