Je cherche cela depuis quelques jours maintenant et jusqu'à présent, le meilleur que je puisse arriver, vérifie la liste ci-dessous. Je n'aime vraiment pas vérifier le support basé sur l'agent utilisateur, d'autant plus que cela puisse être utilisé. J'ai également entendu parler d'au moins une instance où la liste ci-dessous est incorrecte (notée ci-dessous).
Y a-t-il une meilleure méthode basée sur les tests de support directement via JavaScript, ou est-ce à peu près le seul moyen de tester le support?
4 Réponses :
var canEditContent= 'contentEditable' in document.body;
Cela donne un faux positif sur iOS 4 (et plus vieux).
Il donne également un faux positif sur le navigateur Android.
Pour autant que je comprends bien, ce n'est pas un faux positif. Le contenu est modifiable, juste que le système ne fournit aucun moyen de le modifier. (Le problème avec iOS4 et Android se tient toujours, mais la solution est parfaite pour le problème demandé.)
@Mathiasbynens True, mais il n'y a pas de test, je sais que pour éliminer ces faux positifs dans iOS <5 sans renifler.
Le meilleur moyen de rechercher une certaine fonctionnalité est de EM> Test EM> pour cette fonctionnalité sur un élément que vous connaissez devrait le prendre en charge, comme celui-ci:
if(typeof(element.contentEditable) != 'undefined') // same thing.. but with typeof you can be more specific about the type of property you need to find
Je ne sais pas comment j'ai manqué de voir cette propriété.
typeof est un opérateur, pas une fonction, il n'y a donc pas besoin de parenthèses autour de l'opérande.
Cela fonctionne bien, mais pour quelqu'un qui cherche à obtenir cela sur iPhone / iPad: la propriété contentieuse est définie. Le problème est que le système d'exploitation ne le supporte pas réellement, c'est-à-dire que vous n'apparaissez pas le clavier à l'écran pour vous permettre de taper quoi que ce soit. La seule façon dont je vois à ce stade est expressionnant le message d'utilisateur pour tout ce qui concerne iOS.
Comme @Mitjak a dit, cela donne un faux positif sur iOS 4 (et plus ancien).
La meilleure solution pour mon scénario (similaire à la vôtre) que j'ai proposée est ci-dessous. Ce n'est pas probablement pas pare-balles, mais couvre la plupart des situations: Vous pouvez le tester dans Ce jsfiddle . AVIS: Selon vos besoins et objectifs, vous devrez peut-être détecter également la version, car il s'agit d'un soutien de contentieux est ... "Pas idéal" :-) La plupart des douleurs sont traitées par Super Bibliothèque Rangy.js.
La réponse de Bobince fonctionne pour la plupart, mais comme cela a été dite, vous aurez besoin d'un agent d'utilisateur reniflant d'exclure les versions IOS et Android qui n'apportent pas le clavier du logiciel. J'utilise actuellement quelque chose comme ceci:
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;
}