모든 div 콘텐츠를 비활성화하는 방법
div를 비활성화하면 모든 콘텐츠도 비활성화된다고 가정하고 있었습니다.
그러나 내용은 회색으로 표시되지만 상호 작용할 수 있습니다.
그렇게 할 수 있는 방법이 있나요?(div를 해제하고 모든 콘텐츠도 비활성화합니다.)
위의 답변 중 대부분은 양식 요소에서만 작동합니다.내용을 포함한 DIV를 비활성화하는 간단한 방법은 마우스 조작을 비활성화하는 것입니다.예를 들어 다음과 같습니다.
$("#mydiv").addClass("disabledbutton");
CSS
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
보충:
마우스 이벤트만 허용하지 않지만 컨트롤은 여전히 유효합니다.키보드를 사용하여 탐색할 수 있습니다.이 코드를 스크립트에 추가할 수 있으며 키보드 탭과 같은 다른 방법으로 입력에 도달할 수 없습니다.필요에 따라 이 코드를 변경할 수 있습니다.
$([Parent Container]).find('input').each(function () {
$(this).attr('disabled', 'disabled');
});
JQuery와 같은 프레임워크를 사용하여 다음과 같은 작업을 수행합니다.
function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
$('#idOfTheDIV :input').attr('disabled', true);
} else {
$('#idOfTheDIV :input').removeAttr('disabled');
}
}
jQuery를 사용하여 Div 블록에서 입력 요소를 비활성화 및 활성화하면 도움이 됩니다.
부터는 jQuery 1.6을 ..prop.attr디세블로 합니다.
디브(div)가 아니라 블록키먼트(blockkelement)가 필요한 사람들을 위한 간단한 코멘트가 있다. html의HTML5 。<fieldset disabled="disabled"></fieldset>아트리뷰트디세이블 필드 세트의 모든 폼 요소는 디세이블입니다.
요소를 활성화 및 비활성화하기 위한 확장 방법에 대해 설명하려고 합니다.속성을 직접 추가하고 제거하는 것보다 훨씬 깔끔한 방법이라고 생각합니다.
그 후, 다음과 같이 실시합니다.
$("div *").disable();
비활성화된 속성은 DIV 요소에 대한 W3C 사양의 일부가 아니라 폼 요소에 대해서만 해당됩니다.
Martin이 제안한 jQuery 접근법만이 이 목표를 달성할 수 있는 유일한 방법입니다.
이 간단한 CSS 문을 사용하여 이벤트를 디세블로 할 수 있습니다.
#my-div {
pointer-events:none;
}
cletu의 솔루션과 비슷하지만 그 솔루션 사용 중 오류가 발생했습니다.이러한 회피책은 다음과 같습니다.
$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);
나한테는 잘 통한다
를를 wrap wrap div의 범위 내에서form ★★★★★★★★★★★★★★★★★」fieldset 삭제:
<form>
<fieldset disabled>
<div>your controls</div>
</fieldset>
</form>
이것을 성취하는 한 가지 방법은 모든 디바의 자녀들에게 장애 소품을 추가하는 것이다.이것은 매우 간단하게 실현할 수 있습니다.
$("#myDiv").find("*").prop('disabled', true);
$("#myDiv") div "div "를 찾습니다..find("*")의 모든 를 가져옵니다.또, 「」는 「자녀 노드」를 해 주세요..prop('disabled', true)를 지정하면 각각이 디세블이 됩니다.
이렇게 하면 모든 콘텐츠가 비활성화되어 클릭, 탭, 스크롤 등을 할 수 없습니다.또한 css 클래스를 추가할 필요가 없습니다.
테스트 대상 브라우저:IE 9, Chrome, Firefox 및 jquery-1.7.1.min.js
$(document).ready(function () {
$('#chkDisableEnableElements').change(function () {
if ($('#chkDisableEnableElements').is(':checked')) {
enableElements($('#divDifferentElements').children());
}
else {
disableElements($('#divDifferentElements').children());
}
});
});
function disableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = true;
disableElements(el[i].children);
}
}
function enableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = false;
enableElements(el[i].children);
}
}
의 의미를 다음과 같이 디세블로 하는 경우
<div disabled="disabled"> Your content here </div>
다음 CSS를 추가할 수 있습니다.
div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}
여기서의 장점은 당신이 함께 일하고 싶은 디바의 수업과 함께 일하지 않는다는 것이다.
HTML 입력 제어는 '비활성화' 속성을 사용하여 비활성화할 수 있습니다.입력 제어에 대해 "disabled" 속성이 설정되면 해당 제어와 관련된 이벤트핸들러는 호출되지 않습니다.
div와 같은 "disabled" 속성을 지원하지 않는 HTML 요소에 대해 위의 동작을 시뮬레이션해야 합니다.
div가 있고 해당 div에서 클릭 또는 키이벤트를 지원하려면 두 가지 작업을 수행해야 합니다. 1) div를 비활성화하려면 div의 비활성화 속성을 평소처럼 설정하십시오(규칙에 따라만). div의 클릭 또는 키 핸들러에서 비활성화 속성이 div에 설정되어 있는지 확인합니다.문제가 있는 경우 클릭이나 키 이벤트를 무시합니다(예: 즉시 돌아가기).비활성화된 속성이 설정되지 않은 경우 div의 클릭 및/또는 키 이벤트 로직을 수행합니다.
위의 절차도 브라우저에 의존하지 않습니다.
이 이미 명확해졌으므로 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」disabled 아니다DIV기여하다.그러나 xHTML은 확장 가능한 HTML을 의미합니다. 이는 사용자가 자신의 HTML 속성을 정의할 수 있음을 의미합니다(모든 Frontend 프레임워크도 마찬가지).또한 CSS는 다음과 같은 Atribute Selector를 지원합니다.[].
정의된 속성과 함께 표준 HTML 사용:
<div disabled>My disabled div</div>
CSS 사용:
div[disabled] {
opacity: 0.6;
pointer-events: none;
}
메모: CSS 속성 셀렉터는 ID 또는 클래스 이름과 함께 사용할 수도 있습니다. .myDiv[disabled] {...}할 수 를 들어, 값 「」의 를 「」으로 설정합니다. 예를 들어 다음과 같은 HTML 값을 사용하여 표준 속성을 비활성화할 수 있습니다.div[disabled=disabled] {...}.
의 하는 <div/>
CSSpointer-events자 및 그 되지 않습니다.<div/>(SVG의 경우에만)http://caniuse.com/ #filename=filename-filename
「」의 을 , 「」를 해 주세요.<div/>모든 브라우저에서.
쿼리:
$("#myDiv")
.addClass("disable")
.click(function () {
return false;
});
CSS:
.disable {
opacity: 0.4;
}
/* Disable scrolling on child elements */
.disable div,
.disable textarea {
overflow: hidden;
}
「」의 을 , 「」를 해 주세요.<div/>IE10에 대응합니다.
쿼리:
$("#myDiv").addClass("disable");
CSS:
.disable {
/* Note: pointer-events not supported by IE10 and under */
pointer-events: none;
opacity: 0.4;
}
/* Disable scrolling on child elements */
.disable div,
.disable textarea {
overflow: hidden;
}
이건 수색자들을 위한 거야
내가 가장 잘한 건
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
「disabled(비활성화)」 「disabled(비활성화)」(비활성화.
참고: 비활성화된 속성은 사용하지 마십시오.
jQuery 。
이는 훨씬 쉽고 브라우저 간에 작동합니다.
.disabled{
position: relative;
}
.disabled:after{
content: "";
position: absolute;
width: 100%;
height: inherit;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
그런 다음 페이지를 초기화하거나 단추를 전환할 때 페이지를 종료하거나 끌 수 있습니다.
if(myDiv !== "can be edited"){
$('div').removeClass('disabled');
} else{
$('div').addClass('disabled');
}
몇 장씩 나눠서 써야겠다고 생각했어요.
- IE8/9 에서는,< div > 를 무효로 할 수 있습니다.'잘못됐다'는 생각이 들면서
- .removeProp()는 요소에 영구적인 영향을 미치므로 사용하지 마십시오.대신 .prop("disabled", false")를 사용합니다.
- $("#myDiv")filter'input, textarea, select, button').prop'disabled', true)는 보다 명확하며, 다음과 같이 입력으로 놓칠 수 있는 폼 요소를 포착합니다.
코멘트에서 언급했듯이 탭 키를 사용하여 요소 사이를 이동함으로써 요소에 액세스할 수 있습니다.따라서 다음을 권장합니다.
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");
Cletus의 기능을 개량한 버전을 사용합니다.
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
$(this).data('jquery.disabled', this.disabled);
this.disabled = true;
}
});
};
$.fn.enable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
this.disabled = $(this).data('jquery.disabled');
}
});
};
요소의 원래 '비활성' 속성을 저장합니다.
$('#myDiv *').disable();
다음은 div를 마스킹하기 위한 보다 포괄적인 솔루션입니다.
- 개별 CSS 없음
- 페이지 전체 또는 요소만 커버하는
- 마스크 색상 및 불투명도 지정
- 마스크를 통해 팝업을 표시할 수 있도록 Z-index 지정
- 마스크 위에 모래시계 커서를 표시하다
- 다른 마스킹 div를 나중에 표시할 수 있도록 maksOff에서 마스킹 div 제거
- 요소 크기 조정 시 마스크 확장
- 마스크 요소를 반환하여 스타일링 등을 할 수 있도록 하다
모래시계 On과 모래시계 Off도 포함되어 있어 별도로 사용할 수 있습니다.
// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
maskDiv=$('<div style="position:fixed;display:inline"></div>');
$('body').append(maskDiv);
elem.data('maskDiv', maskDiv);
}
if (typeof settings==='undefined' || settings===null) settings={};
if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;
// stretch maskdiv over elem
var offsetParent = elem.offsetParent();
var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
maskDiv.width(widthPercents);
maskDiv.height(heightPercents);
maskDiv.offset($(elem).offset());
// set styles
maskDiv[0].style.backgroundColor = settings.color;
maskDiv[0].style.opacity = settings.opacity;
maskDiv[0].style.zIndex = settings.zIndex;
if (settings.hourglass) hourglassOn(maskDiv);
return maskDiv;
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
console.log('maskOff no mask !');
return;
}
elem.removeData('maskDiv');
maskDiv.remove();
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
if (typeof decendents==='undefined' || decendents===null) decendents=true;
if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
elem.removeClass('hourGlass');
elem.removeClass('hourGlassWithDecendents');
}
function elemFromParam(elemOrId) {
var elem;
if (typeof elemOrId==='undefined' || elemOrId===null)
elem=$('body');
else if (typeof elemOrId === 'string' || elemOrId instanceof String)
elem=$('#'+elemOrId);
else
elem=$(elemOrId);
if (!elem || elem.length===0) {
console.log('elemFromParam no element !');
return null;
}
return elem;
}
이를 통해 다음과 같은 작업을 수행할 수 있습니다.
maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask
jsfiddle 참조
function disableItems(divSelector){
var disableInputs = $(divSelector).find(":input").not("[disabled]");
disableInputs.attr("data-reenable", true);
disableInputs.attr("disabled", true);
}
function reEnableItems(divSelector){
var reenableInputs = $(divSelector).find("[data-reenable]");
reenableInputs.removeAttr("disabled");
reenableInputs.removeAttr("data-reenable");
}
jQuery에서 다른 방법은 포함된 DIV의 내부 높이, 내부 너비 및 위치를 가져오고 같은 크기 위에 투명하게 다른 DIV를 겹치는 것입니다.이 작업은 입력뿐만 아니라 해당 컨테이너 내부의 모든 요소에서 작동합니다.
단, JS가 비활성화되어도 DIV 입력/콘텐츠를 사용할 수 있습니다.위의 답변도 마찬가지입니다.
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
이 css only/noscript 솔루션은 필드 세트(또는 div 또는 기타 요소) 위에 오버레이를 추가하여 상호 작용을 방지합니다.
fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }
투명 오버레이와 같은 보이지 않는 오버레이를 원하는 경우 배경이 없으면 작동하지 않으므로 배경을 rgba(128,128,128,0)로 설정하십시오.위의 내용은 IE9+에서 유효합니다.IE11+에서는 다음과 같은 훨씬 심플한 css가 동작합니다.
[disabled] { pointer-events: none; }
크롬
단순히 사람들이 클릭하는 것을 멈추고 보안에 대해 끔찍하게 걱정하지 않는다면 99999의 z-index를 가진 절대치 div를 찾았습니다.내용 위에 div가 있으므로 내용을 클릭하거나 액세스할 수 없습니다.조금 더 심플하고 삭제할 필요가 있을 때까지 CSS만의 솔루션입니다.
포인터 이벤트를 비활성화하려면 매우 쉽게 처리할 수 있습니다.
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
또는
유효하게 하려면 ,
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";
편집: 내가 사용한 아래.on()메서드, 대신 사용.bind()방법
$(this).bind('click', false);
$(this).bind('contextmenu', false);
설정을 제거하려면.unbind()방법.반면,.off()메서드가 예상대로 작동하지 않습니다.
$(this).unbind('click', false);
$(this).unbind('contextmenu', false);
수백 개의 솔루션을 연구한 후 포인터 이벤트에 대해 알게 된 것이 아래에 나와 있습니다.
@코코도코가 그의 솔루션에서 언급한 바와 같이 IE를 제외한 모든 브라우저에 적합합니다. pointer-events하위 버전이 아닌 IE11에서 작동합니다.IE11에서도 포인터 이벤트는 하위 요소에서 작동하지 않습니다.그래서 우리가 다음과 같은 것을 가지고 있다면
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>
여기서 span - 는 자 요소, 설정입니다.pointer-events: none동작하지 않다
이 문제를 해결하기 위해 IE의 포인터 이벤트로 기능할 수 있는 함수를 작성했습니다.
JS 파일에서
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}
CSS 파일 내
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}
HTML에서
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>
이 조작은pointer-events시나리오:pointer-events는 동작하지 않습니다.또, 상기의 서브 요소의 조건이 발생했을 경우에도 동작하지 않습니다.
동일한 JS Fidle
심플셋 해법
내 셀렉터를 봐
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);
그fieldsetUserInfois div에는 비활성화 또는 활성화하려는 모든 입력이 포함되어 있습니다.
이것이 너에게 도움이 되길 바란다.
설정 가능한 Javascript 라이브러리는 html 문자열 또는 dom 요소를 사용하여 원하지 않는 태그와 속성을 제거합니다.이것들은 html sanitizer라고 불립니다.예를 들어 다음과 같습니다.
예: DOMPurify에서
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</div>
언급URL : https://stackoverflow.com/questions/639815/how-to-disable-all-div-content
'programing' 카테고리의 다른 글
| Java에서 익명 내부 클래스는 어떻게 사용됩니까? (0) | 2022.10.14 |
|---|---|
| JavaScript 형식 지정으로 문자열을 datetime으로 변환하려면 어떻게 해야 합니까? (0) | 2022.10.14 |
| '콜 가능'이란? (0) | 2022.10.14 |
| 도커에서 분리 실행 시 Python 앱이 인쇄되지 않음 (0) | 2022.10.14 |
| 사용자가 위로 스크롤하지 않는 한 오버플로 div를 아래로 스크롤 유지 (0) | 2022.10.14 |