disableSelection sur tout sauf l’entrée

Eh bien, attachez vos bretelles et préparez-vous à un sale bidouille .

Avertissement:

Je ne pense pas que ce soit une bonne façon de faire les choses. Je voulais simplement relever le défi d’obtenir la fonctionnalité souhaitée du PO. Si quelqu’un d’autre peut faire en sorte que cela fonctionne de manière plus propre, merci de le poster.

Après avoir joué avec la fonction disableSelection() , il semblait que si un élément parent avait été désactivé, tous ses enfants seraient également non sélectionnables ( corrigez-moi si je me trompe ). J’ai donc décidé que si vous vouliez que tout soit non sélectionnable, à l’exception des petites pièces, vous pouvez mettre tout votre balisage dans un

non sélectionnable et utiliser le positionnement absolu pour placer des clones sélectionnables de vos balises (ou toute balise, vraiment). au-dessus des non sélectionnables. Ces clones résideraient dans une seconde

qui n’était pas désactivée.

Voici un exemple de cette idée: http://jsfiddle.net/pnCxE/2/ .

Désavantages:

• Le style devient un gros mal de tête. Tout élément reposant sur le style d’un parent (position, taille, couleurs, etc.) ne peut pas être cloné, car les clones se trouvent dans un endroit séparé.
• Les formulaires deviennent beaucoup plus difficiles à gérer car (encore une fois) le clone n’est pas à la même place que l’élément cloné.
• Vous devez gérer les conflits de nommage car le clone aura le même identifiant que l’élément cloné. (C’est faisable; je ne voulais tout simplement pas le coder car cela nécessiterait probablement une attention particulière de la part de ceux qui utilisent cette idée)

Ainsi, pendant que vous pouvez contourner les limitations sélectionnables, il peut être préférable d’accepter simplement la sélection du conteneur. Je réfléchirais longuement avant de mettre ce code dans un environnement de production.

J’ai trouvé une solution qui semble faire ce que je veux et je serais intéressé par les commentaires / améliorations des experts de jquery / javascript.

 $(document).ready(function () { $("body").disableSelection(); $("body").delegate('input[type=text],textarea', "focus", function () { $("body").enableSelection(); }); $("body").delegate("input[type=text],textarea", "blur", function () { $("body").disableSelection(); }); }); 

Lorsqu’une zone de texte (input [type = text] ou textarea) a le focus, le fait de faire glisser avec la souris ne sélectionne que le texte dans la zone de texte. Par conséquent, il est “sûr” d’activer la sélection pour toute la page lorsqu’une zone de texte a le focus (entre les événements de focus et de flou).

Il y a un retard notable lors de la tabulation entre les zones de texte sur IE8 / 9. Ce n’est pas perceptible sur Google Chrome, qui a, je crois, un moteur javascript plus rapide. Donc, je peux vivre avec la baisse de performance, d’autant plus que IE10 va avoir un moteur javascript plus rapide.

METTRE À JOUR

Lorsque vous utilisez ASP.NET UpdatePanel , vous devez le modifier pour désactiver la sélection après chaque publication partielle:

 Sys.Application.add_load(function () { $("body").disableSelection(); }); 

Essayez ceci, même si c’est pareil avec ce que vous utilisez déjà:

 $('* :not(input)').disableSelection(); 

Je ne comprends pas pourquoi vous devez utiliser un élément de body entier et ne pas le réduire aux nœuds de texte (p, h [..], ul, ol, etc.)

Et je suis d’accord avec @David Thomas – il serait plus facile de voir une page de test sur laquelle vous travaillez.