Je veux insérer des caractères d'onglets à l'intérieur d'une textarea, comme ceci: i peut insérer avant / après em> le texte Texarea existant - et je peux insérer / remplacez tout texte em> dans le textarea - mais n'a pas encore été capable d'insérer à l'intérieur em> le texte Texarea existant (par le curseur) de manière simple. P> $('textarea:input').live('keypress', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
// Press TAB to append a string (keeps the original TEXTAREA text).
$(this).append("TAB TAB TAB AFTER TEXTAREA TEXT");
// Press TAB to append a string (keeps the original TEXTAREA text).
$(this).focus().prepend("TAB TAB TAB BEFORE TEXTAREA TEXT");
// Press TAB to replace a all text inside TEXTAREA.
$(this).val("INSERT INTO TEXTAREA / REPLACE EXISTING TEXT");
}
});
4 Réponses :
Malheureusement, la manipulation du texte à l'intérieur des éléments Texarea n'est pas aussi simple que l'on pourrait espérer. La raison pour laquelle Tabby est plus grande que ces simples extraits est que cela fonctionne mieux. Il a une meilleure compatibilité entre navigateurs croisés et gère des choses comme des sélections de tabulation.
Lorsque minifiée, il ne s'agit que d'environ 5k. Je suggérerais d'utiliser. Vous devrez soit découvrir et résoudre ces mêmes cas de bord vous-même de toute façon, ou vous ne le saurez même pas si les utilisateurs ne les signalent pas.
+1 En regardant le code «Tabby», je ne vois pas trop de déchets là-bas, juste le code nécessaire pour répliquer la fonctionnalité de l'éditeur de code et le faire de manière compatible entre les navigateurs. Je conviens que vous devriez le refroidir à l'aide d'un mini-ordinateur et l'utiliser.
+1 Dave, oui, j'ai réalisé que la tâche apparemment simple était assez difficile. Je vais envisager Tabby Devrais-je avoir besoin d'une solution compatible avec navigateur. Merci. / Kristoffer :-)
Je créais un IDE simple Ajax pour moi pour moi-même afin que je puisse tester rapidement les extraits de PHP.
Je me souviens de trébucher sur le même problème, voici comment je l'ai résolu: P>
$('#input').keypress(function (e) {
if (e.keyCode == 9) {
var myValue = "\t";
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
e.preventDefault();
}
});
Fonctionne bien (FF 3.0.15). Merci.
J'ai dû remplacer keypress avec clé pour obtenir ceci pour travailler en chrome.
Très bon ... Mieux meilleur que d'autres exemples qui utilisent des tonnes de code! Je devais remplacer la clé de la clé ... se demandant si nous pouvions suffire avec seulement la clé de frappe.
Ouais, traiter avec les sélections de champ d'entrée sur les différents navigateurs est une gêne, notamment comme dans IE, il existe quelques méthodes que l'aspect comme ils devraient travailler mais ne le font pas. (Notamment en combinant avec Voici quelques fonctions d'utilité que j'utilise pour traiter avec des sélections d'entrée. Il renvoie la valeur de la division d'entrée en bits qui sont avant, à l'intérieur et après la sélection (avec la sélection comptant comme une chaîne vide à la position de mise au point d'entrée si ce n'est pas une sélection). Cela le rend assez simple de remplacer et d'insérer du contenu au point que vous souhaitez, tout en prenant soin du problème du CRLF IE. (il peut y avoir une jQuery qui fait quelque chose comme ça, mais je n'ai pas encore rencontré un.) setendpoint , puis mesure longueur , qui semble ok jusqu'à ce que la sélection commence ou se termine dans les nouvelles lignes.)
GetPartititionedValue donne une erreur dans IE sur la plage .MovetoelementText (entrée); Ligne pour
Vous pouvez résoudre ce problème en remplaçant la ligne d'incrimination avec var -trange = entrée.CreateTexTrange (); gamme.MOVETOBOOKMARK (INPUTRANGE.GETOBOBBOCK ());
Le lien vers Tabby est mort, mais un repo github est disponible: Github.com/alanhogan/tabby