Удаление обработчиков изменения размера в содержимом div

Question

Я создал div contentEditable для использования в качестве расширенного текстового поля. В нем есть обработчики изменения размера, от которых я бы хотел избавиться. Есть идеи, как мне это сделать?

Редактировать: Похоже, это происходит потому, что я абсолютно позиционирую div, поэтому Firefox добавляет в элемент ярости _moz_resize элемент, который я не могу отключить.

Answer 1

Так же, как примечание, вы можете отключить функцию автоматического изменения размера Firefox, отправив (несколько плохо документированную) команду enableObjectResizing в документ:

document.execCommand("enableObjectResizing", false, false);

AFAIK, это можно безопасно сделать только после загрузки документа, и я не знаю, как отключить захват, который является отдельной функцией.

Answer 2

Похоже, я смогу обойти это, добавив div-обертку и установив абсолютно оберточную оболочку, а затем сделав внутреннее div-содержимое contentEditable.

Answer 3

В Chrome 39 эти маркеры, кажется, не существуют, даже если вы этого хотели.

В Firefox можно просто использовать execCommand, как ответил ZoogieZork.

Но в Internet Explorer это нельзя отключить. Надо обойти.

В WYMeditor , вот что я нашел.

Следующие результаты:

• В IE интерфейс изменения размера отображается на долю секунды, а затем исчезает. Кажется, у пользователя нет возможности использовать его.
• Изображения - это текст, выделенный на mouseup
• Возможность перетаскивания изображений. В некоторых браузерах их, возможно, придется выбирать перед перетаскиванием. Как написано в предыдущем пункте, простой mouseup приведет к выбору изображения.
• Изображения выбираются с использованием выделения текста, а не «выбора элемента управления» (того, который обеспечивает интерфейс изменения размера).

Это лучшее, что я мог придумать после нескольких часов очень глубоких вдохов. Я думаю, что это хорошо, если вы действительно хотите избавиться от этих ручек.

В IE установка oncontrolselect для возврата false на изображение действительно препятствует появлению этих дескрипторов, и вы можете сделать это умно, прикрепив следующий обработчик к событию mousedown:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

На самом деле это работает не совсем хорошо. Причина, по которой он работает не очень хорошо, состоит в том, что для начала операции перетаскивания изображения нужно было нажать и удерживать мышь, не перемещая ее, в течение доли секунды, и только затем начать ее перемещать для сопротивление Если вы нажмете мышку и сразу начнете перетаскивать, изображение останется на своем месте и не будет перетаскиваться.

Так что я этого не делал.

Я сделал следующее. Во всех браузерах я использовал mouseup для выбора текста исключительно для целевого изображения. В не-IE и IE11, синхронно:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); // In my case, I used Rangy
    }
}

В IE 7–10 асинхронно:

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

Это позволило убедиться, что после того, как эти маркеры появятся, они исчезнут как можно скорее, потому что изображение теряет свой «выбор элемента управления», поскольку этот выбор заменяется обычным выделением текста.

В Internet Explorer с 7 по 11 я прикрепил обработчик к dragend, который удаляет все выделения:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); // I use Rangy for this, as well
    }
}

Это делает дескрипторы, которые появляются после перетаскивания, исчезают.

Я надеюсь, что это поможет, и я надеюсь, что вы можете сделать это еще лучше.

Answer 4

Я просто столкнулся с этой проблемой. Я попытался document.execCommand("enableObjectResizing", false, false);, но значок перемещения все еще появлялся. То, что просто исправило мою проблему, было просто e.preventDefault(), когда произошло событие onmousedown

element.onmousedown = function(e){
       e.preventDefault();
}

Answer 5

... просто лучшее исправление когда-либо

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

или любой HTML-элемент, заключающий в себе ваш ввод / img

Работает на IE11 как шарм

Answer 6

для IE11 (я не тестировал более старые версии IE, но чувствую, что это будет работать), вы можете добавить атрибут contenteditable = "false" в тег img. Это предотвратит изменение размера при сохранении перетаскивания на месте.

Answer 7

Вы пробовали добавить стиль

border: none;

в див?