Определить, поддерживает ли браузер contentEditable?

Question

Есть этот вопрос , но опубликованное решение - это перехват браузера, которого я стараюсь избегать.

Мне нужно сделать свой веб-сайт совместимым с iPad и, возможно, более новыми Android. Я использовал старую версию FCKEditor (теперь CK Editor) для моих редакторов WYSIWYG, но она не работает на мобильных устройствах, поэтому я хочу заменить ее на простую текстовую область с чем-то вроде уценки, если она не поддерживается .

Возможно, он не будет работать, поскольку мобильные устройства, как правило, не поддерживают это свойство contentEditable, что означает, что экранная клавиатура не появляется при нажатии на нее.

Как я могу определить, поддерживает ли браузер contentEditable? Было предложено, чтобы я просто проверил рассматриваемый div с чем-то вроде mydiv.contentElement === undefined или чем-то в этом роде, но div (если он его использует) встроен в редактор FCK и похоронен где-то в iframe.

Нет ли другого способа определить, поддерживает ли браузер contentEditable в целом?

---

Только что попробовал это:

var contentEditableSupport = typeof $('<div contenteditable="true">')[0].contentEditable !== 'undefined';

Говорит "правда" на моем iPad ...... Я не думаю, что это должно.

Редактировать: Он возвращает "строку", потому что все атрибуты являются строками .... это просто чтение атрибута. Как еще я должен это сделать?

Answer 1

Вы можете создать анонимный редактируемый div, проверить его на contentEditable, а затем удалить div.

Answer 2

Вот тест, который я использую, а также используется в Modernizr . Это даст ложные срабатывания в iOS 4 (и, возможно, раньше), но, к сожалению, невозможно обнаружить в этих средах.

var contentEditableSupport = "contentEditable" in document.documentElement;

Answer 3

Мне удалось это сделать, проверив значение по умолчанию свойства contentEditable, а не наличие или тип. W3 spec указывает, что отсутствующим значением по умолчанию для contentEditable является «наследовать», но в более старых браузерах (например, Android / Gingerbread) значением по умолчанию является «false». Спасибо Фуджи за комментарий к ОП, который направил меня в правильном направлении!

Этот тест работает для меня:

var contentEditableSupport = $('<div/>')[0].contentEditable == 'inherit';

Answer 4

Проверка execCommand

if (document.execCommand) {
    ... browser supports contentEditable
} else {
    ... browser doesn't support contentEditable    
}

Answer 5

Чтобы проверить, есть ли какие-либо свойства для элемента. Вы можете сделать это

var element = document.createElement('__ELEMENT__');
if ('__PROPERTY__' in element ) {
    // property supported in the browser
}

или

if ('__PROPERTY__' in document.createElement('__ELEMENT__') ) {
    // property supported in the browser
}

Ссылка ниже содержит все это.

1. https://github.com/Modernizr/Modernizr/issues/570
2. http://diveintohtml5.info/everything.html#contenteditable