0
HTML 및 JavaScript로 리치 텍스트/wysiwyg 편집기 구성 요소를 구축하고 있습니다. 컬러 피커에 대한 이미지 입력 요소가 포함 된 툴바 항목의 정렬되지 않은 목록이 있습니다. 색상 선택기는 입력 요소의 click 이벤트에 표시되는 오버레이입니다.JavaScript, DOM 흐림/포커스, 드롭 다운
문제 :
나는 초점이 도구 모음 항목 입력 요소에서 손실 된 경우 색상 선택기 오버레이 숨기려. 따라서 입력 요소의 blur 이벤트를 처리하고 색상 피커 오버레이에서 hide를 호출합니다. 입력 요소의 blur 이벤트가 색상 선택기 오버레이 내부의 click 이벤트 핸들러보다 먼저 발생하기 때문에 약간의 타임 아웃도 사용합니다. IE에서는이 모든 것이 잘 작동하지만 파이어 폭스에서는 타임 아웃이 내가 원하는 것보다 훨씬 더 중요합니다.
입력 요소를 앵커로 변경하고 오버레이를 배치하려고 시도했습니다. 툴바 항목에 오버레이를 클릭 할 때 여전히 포커스가 있다고 말하는 오히려 재미있었습니다.
사람들은 정상적인 드롭 다운으로이 상황을 어떻게 처리합니까?
감사합니다, 벤
무섭게 단순화, 비 OOP 예 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<style type="text/css">
.richTextEditor
{
}
.richTextEditor .toolbar
{
}
.richTextEditor iframe
{
border: 1px solid #000;
background: #FFF;
}
</style>
</head>
<body>
<div id="notes" class="richTextEditor">
<ul class="toolbar">
<li command="bold"><input type="button" value="Bold" /></li>
<li command="foreColor"><input type="button" value="Show Colour Picker" /></li>
</ul>
<iframe frameborder="0"></iframe>
</div>
<script type="text/javascript">
var notes = document.getElementById("notes");
var editorElement = notes.getElementsByTagName("IFRAME")[0];
var colourPicker = null;
function showColourPicker(toolbarItemElement) {
if (!colourPicker) {
colourPicker = document.createElement("DIV");
var red = document.createElement("A");
red.href = "javascript:void(0);";
red.style.backgroundColor = "red";
red.innerHTML = "red";
red.onclick = function() {
var toolbarItemCommand = toolbarItemElement.getAttribute("command");
editorElement.contentWindow.focus();
editorElement.contentWindow.document.execCommand(toolbarItemCommand, false, "rgb(255,0,0)");
editorElement.contentWindow.focus();
colourPicker.style.display = "none";
};
colourPicker.appendChild(red);
document.body.appendChild(colourPicker);
} else {
colourPicker.style.display = "block";
}
toolbarItemElement.getElementsByTagName("INPUT")[0].onblur = function() {
window.setTimeout(function() {
colourPicker.style.display = "none";
}, 100);
};
}
function toolbarItemInputElement_click(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
while (target.tagName != "LI") {
target = target.parentNode;
}
var toolbarItemCommand = target.getAttribute("command");
if (toolbarItemCommand == "foreColor" || toolbarItemCommand == "backColor") {
showColourPicker(target);
} else {
editorElement.contentWindow.focus();
editorElement.contentWindow.document.execCommand(toolbarItemCommand, false, null);
editorElement.contentWindow.focus();
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.cancelBubble = true;
}
return false;
}
window.onload = function() {
// turn on design mode
editorElement.contentWindow.document.designMode = "on";
// attach toolbar item event handlers
var toolbarItemElements = document.getElementsByTagName("LI");
for (var i = 0; i < toolbarItemElements.length; i++) {
var toolbarItemInputElement = toolbarItemElements[i].getElementsByTagName("INPUT")[0];
toolbarItemInputElement.onclick = toolbarItemInputElement_click;
}
};
</script>
</body>
</html>
그것은 상당히 무작위, 그래서 당신을 위해 일하지 않는 경우 페이지를 새로 고침 몇 번을 시도해보십시오. Firefox에서 다음을 수행합니다.
- 마우스를 사용하여 iFrame에 포커스를 설정하십시오.
- 유형 111space222space333space444 (여기서 space는 스페이스 바이며 word space가 아닙니다!).
- "222"를 두 번 클릭하면 강조 표시됩니다.
- "색상 선택기 표시"를 클릭하십시오.
- "빨간색"을 클릭하십시오.
- Firefox에서 아무 일도 일어나지 않습니다.
100ms가 충분하지 않습니까? 무엇이 될까요?
다시 한번 감사드립니다.
Fx의 시간 초과 지연은 얼마나 더 큽니까?일반적으로 스레드가 유휴 상태 일 때 (모든 이벤트가 시작되고 전파되면) 0ms의 시간 만료로 충분합니다. 몇 가지 예제 소스 코드를 게시 할 수 있습니까? –
내 생각은 정확하게 - 나는 다른 일이 벌어지고있는 것 같지만 확실히 식별 할 수는 없다. 나는 곧 버전을 줄이려고 노력할 것이다. 감사. –
예제가 게시되었습니다. –