У меня возникла проблема с текстовым редактором TinyMCE внутри диалогового окна jQuery. Всякий раз, когда текстовое поле текстового редактора сосредоточено, и я не фокусирую его, страница прокручивается вверху диалога. Это, очевидно, происходит только в том случае, если страница прокручивается, а страница в настоящее время не прокручивается вверх. Происходит всегда с Firefox, иногда с Chrome.Редактор TinyMCE в диалоговом окне jQuery autoscrolls top при нефокусировке редактора

Чтобы проверить это, убедитесь, что окно Result прокручивать и не прокручивается вверх.

Шаги для воспроизведения:

Фокус текстовой текстового редактора
Нажмите вне его

Или

Фокус текстовое поле текстового редактора
Щелкните контекстное меню (напр. Файл)
Hover над другим Контекстным (напром Edit)

Упрощенный HTML:.

<div id="dialog"> 
    <div style="height:100px"> 
     Lorem ipsum lorem ipsum Lorem ipsum 
     lorem ipsum Lorem ipsum lorem ipsum 
    </div> 
    <textarea id="editor"></textarea> 
</div>

упрощенного JavaScript:

$(document).ready(function() { 
    $("#dialog").dialog({ 
     autoOpen: true, 
     width: "auto", 
     position: { 
      my: "center top", 
      at: "center top", 
      of: window 
     }, 
     modal: true 
    }); 

    $("#editor").css("height", "250px"); 
    tinymce.init({ 
     selector: "#editor" 
    }); 
});

Кажется, что unfocusing делает TinyMCE фокусировать Диалог который затем прокручивает страницу. Если в диалоговом окне нет кнопок, кроме некоторых элементов ввода, он фокусируется на первом из них.

Я проследил место в коде TinyMCE, где это происходит, но комментирование функции не устраняет проблему.

d.on("focusout", function() { 
    console.log("FOCUSOUT"); 
    window.setTimeout(function() { 
     var t = e.focusedEditor; 
     u(s()) || t != d || (d.fire("blur", { 
      focusedEditor: null 
     }), e.focusedEditor = null, d.selection && (d.selection.lastFocusBookmark = null)) 
    }, 0) 
})

Любые идеи, как исправить это странное поведение или то, что на самом деле вызывает его?

EDIT:

По-прежнему имеет ту же проблему. Вот gif проблемы: http://gfycat.com/SneakyImpartialAmazontreeboa

Как видно, первый фокусируемый элемент в диалоговом окне фокусируется, когда редактор TinyMCE теряет фокус (щелкнув в другом месте или переключая контекстное меню). Я добавил консольное сообщение «FOCUSOUT» к исходному коду TinyMCE, но я все еще не мог найти, что его вызывает.

Точный код, используемый в вышеуказанном GIF:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Test</title> 
<link rel="stylesheet" href="/js/jquery-ui/css/redmond/jquery-ui-1.10.4.custom.css"> 
<script src="/js/jquery-1.10.2.js"></script> 
<script src="/js/jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script> 
<script src="/js/tinymce/tinymce.min.js"></script> 
</head> 
<body> 

<div id="dialog"> 
    <p>Lorem ipsum!</p> 
    <button>BUTTON</button> 
    <p>...text...</p> 
    <p>...text...</p> 
    <p>...text...</p> 
    <p>...text...</p> 
    <textarea id="editor" rows="5"></textarea> 
</div> 

<script> 
$(document).ready(function() 
{ 
    $("#dialog").dialog(
    { 
     autoOpen: true, 
     modal: true, 
     width: window.innerWidth/1.75, 
     position: { my: "center top", at: "center top", of: window }, 
    }); 
    tinyMCE.init(
    { 
     selector: "#editor" 
    }); 

    $(".ui-dialog-titlebar").hide(); // Hide dialog titlebar 
    $(".ui-dialog").css("border", "1px solid black"); // Add border 
}); 
</script> 

</body> 
</html>

источник

2015-09-23 bloodleh

Он работает здесь - ни один из сценариев не может быть воспроизведен (хром, убунт) – davidkonrad

Странно, я постараюсь на Ubuntu в течение нескольких часов. – bloodleh

@ davidkonrad Теперь тестируется Ubuntu. Все еще 100% воспроизводимый с помощью Firefox, происходит случайным образом и довольно редко с Chrome и, по-видимому, только со вторым методом с контекстным меню. – bloodleh

пытаются закомментировав модальность: истинный

$("#dialog").dialog({ 
    autoOpen: true, 
    width: "auto", 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    }, 
    //modal: true 
});

https://jsfiddle.net/dqrarcv3/6/

устраняет проблему в FF

источник

2016-06-16 23:03:49 joshwa

Интерфейс хочет сосредоточиться на чем-либо в диалоговом окне и , когда крошечный потерял фокус, затем он сфокусировался на первом объекте в диалоговом окне и на автопрокрутке браузера.

Поэтому вам нужно отключить автофокусировку в диалоговом окне пользовательского интерфейса.

$.ui.dialog.prototype._focusTabbable = $.noop;

источник

2017-04-28 09:25:06

Редактор TinyMCE в диалоговом окне jQuery autoscrolls top при нефокусировке редактора

EDIT:

ответ

Смежные вопросы