Как обнаружить поддержку contentEditable через JavaScript?

Я искал это в течение нескольких дней теперь, и до сих пор лучшее, что я могу придумать просмотрев список ниже. Мне очень не нравится проверять поддержку на основе User-Agent, тем более, что ее можно подделать. Я также слышал по крайней мере об одном случае, когда приведенный ниже список неверен (см. ниже).

  • Является Ли Internet Explorer?
  • Это WebKit? (но я читал, что mobile Safari не поддерживает его)
  • Is Опера?
  • - Это геккон и версии >= 1.9? (что означает Firefox 3 или более поздней версии)

есть ли лучший метод, основанный на тестировании поддержки непосредственно через JavaScript, или это в значительной степени единственный способ проверить поддержку?

7
contenteditable cross-browser html javascript

4 ответов

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

if(element.contentEditable != null)
    // then it's supported

или

if(typeof(element.contentEditable) != 'undefined')
   // same thing.. but with typeof you can be more specific about the type of property you need to find
7
var canEditContent= 'contentEditable' in document.body;
9

лучшее решение для моего сценария (похожего на ваш), которое я придумал, ниже. Это, вероятно, не пуленепробиваемый, но охватывает большинство ситуаций:

var ua = navigator.userAgent;
var android_version = ua.match(/Android ([0-9\.]+)/);
var div = document.createElement("DIV");

if( typeof(div.contentEditable) == 'undefined' ||
  (/(iPhone|iPod|iPad)/i.test(ua) && /OS [1-4]_\d like Mac OS X/i.test(ua)) ||
  (android_version!=null && parseFloat(android_version[1])<3 ) ||
  (/(Opera Mobi)/i.test(ua))
) {
  // doesn't support contenteditable
} else {
  // supports contenteditable
}

вы можете проверить его в этот jsFiddle.

Примечание: В зависимости от ваших потребностей и цели, вам может потребоваться определить версию IE, а также, потому что это поддержка contenteditable is ... "не идеально": -) большинство болей приходится на super library Rangy.js.

2

ответ bobince работает по большей части, но, как уже было сказано, вам понадобится пользовательский агент, чтобы исключить версии iOS и Android, которые не вызывают программную клавиатуру. В настоящее время я использую что-то вроде этого:

function isContentEditable() {
    var canEditContent = 'contentEditable' in document.body;
    if (canEditContent) {
        var webkit = navigator.userAgent.match(/(?:iPad|iPhone|Android).* AppleWebKit\/([^ ]+)/);
        if (webkit && parseInt(webkit[1]) < 534) {
            return false;
        }
    }
    return canEditContent;
}

это должно остановить старые устройства iOS и Android от возврата true. Однако у него все еще есть одна проблема: физические клавиатуры. Если, например, устройство работает под управлением Android 2.3, но имеет физическую клавиатуру, пользователь сможет использовать contentEditable, но эта функция вернет false. Однако физические клавиатуры довольно редки.

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

вы можете немного уменьшить эти проблемы, имея какой-то способ для пользователя вручную переопределить нюхательную часть сценария обнаружения. Ты мог бы ... реализуйте это в функции isContentEditable, добавив проверку переопределения в " if (canEditContent)". Однако реализация пользовательского интерфейса для этого может представлять большую проблему ;).

1