कीप्रेस: ​​पाठ क्षेत्र के अंदर प्रेस टैब

Question

मैं एक पाठ क्षेत्र के अंदर टैब वर्ण सम्मिलित करना चाहते हैं (एक मौजूदा लेख को संपादित करते), इस तरह:

<textarea>{KEYPRESS-INSERTS-TAB-HERE}Hello World</textarea> 

मैं सम्मिलित कर सकते हैं इससे पहले कि/ मौजूदा पाठ क्षेत्र पाठ के बाद - और मैं टेक्स्ट/टेक्स्ट टेक्स्ट में सभी टेक्स्ट को प्रतिस्थापित कर सकता हूं - लेकिन अभी तक को मौजूदा टेक्स्टटेरा टेक्स्ट (कर्सर द्वारा) को सरल तरीके से डालने में सक्षम नहीं हुआ है।

$('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"); 

    } 
}); 

एक "पाठ क्षेत्र में टैब" प्लग-इन jQuery ("Tabby") के लिए नहीं है - लेकिन यह 254 कोड लाइनों है - मैं कोड के कुछ ही लाइनों के लिए उम्मीद कर रहा था।

मैंने जो कुछ लिंक पढ़े हैं: (फिर से, मैं कम कोड लाइनों को पसंद करूंगा)।

http://www.dynamicdrive.com/forums/showthread.php?t=34452
http://www.webdeveloper.com/forum/showthread.php?t=32317
http://pallieter.org/Projects/insertTab/

कृपया सलाह दें। धन्यवाद।

Answer 1

मैं अपने लिए एक एजेक्स संचालित सरल आईडीई बना रहा था ताकि मैं तेजी से PHP स्निपेट का परीक्षण कर सकूं।

मैं एक ही समस्या पर ठोकर याद है, यहाँ मैं इसे कैसे हल किया है:

$('#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(); 
    } 
}); 

#input पाठ क्षेत्र की आईडी है।

कोड पूरी तरह से मेरा नहीं है, मैंने इसे कहीं Google पर पाया।

मैंने केवल एफएफ 3.5 और आईई 7 पर इसका परीक्षण किया है। यह दुख की बात आईई 7 पर काम नहीं करता है।

Answer 2

दुर्भाग्यवश, टेक्स्टरेरा तत्वों के अंदर पाठ को जोड़ना उतना आसान नहीं है जितना कि कोई उम्मीद कर सकता है। टैबबी उन साधारण स्निपेट से बड़ा कारण यह है कि यह बेहतर काम करता है। इसमें बेहतर क्रॉस-ब्राउज़र संगतता है और टैबबिंग चयन जैसी चीजें हैंडल करती हैं।

जब minified, यह केवल 5k है। मैं इसका इस्तेमाल करने का सुझाव दूंगा। आपको या तो वही किनारे के मामलों को स्वयं खोजना होगा और समस्या निवारण करना होगा, या यदि उपयोगकर्ता उन्हें रिपोर्ट नहीं करते हैं तो उनके बारे में भी नहीं पता हो सकता है।

Answer 3

हाँ, विभिन्न ब्राउज़रों में इनपुट फ़ील्ड चयन से निपटना एक परेशानी है, खासकर आईई में कुछ विधियां हैं जो देखें जैसे उन्हें काम करना चाहिए लेकिन वास्तव में नहीं। (विशेष रूप से, setEndPoint का उपयोग कर तो length है, जो ठीक लग रहा है जब तक चयन शुरू होता है या नई-पंक्तियों में समाप्त होता है को मापने के संयोजन।)

यहाँ उपयोगिता कार्यों मैं इनपुट चयन के साथ सौदा करने के लिए उपयोग की एक जोड़ी है। यह इनपुट विभाजन के मूल्य को पहले से, अंदर और बाद में बिट्स में विभाजित करता है (इनपुट चयन फोकस स्थिति पर एक खाली स्ट्रिंग के रूप में गिनती चयन के साथ यदि यह चयन नहीं है)। यह आईई सीआरएलएफ समस्या का ख्याल रखने के दौरान, इच्छित बिंदु पर सामग्री को प्रतिस्थापित करने और सम्मिलित करने के लिए काफी सरल बनाता है।

(एक ऐसा jQuery हो सकता है जो ऐसा कुछ करता है, लेकिन मुझे अभी तक एक मिलना है।)

// getPartitionedValue: for an input/textarea, return the value text, split into 
// an array of [before-selection, selection, after-selection] strings. 
// 
function getPartitionedValue(input) { 
    var value= input.value; 
    var start= input.value.length; 
    var end= start; 
    if (input.selectionStart!==undefined) { 
     start= input.selectionStart; 
     end= input.selectionEnd; 
    } else if (document.selection!==undefined) { 
     value= value.split('\r').join(''); 
     start=end= value.length; 
     var range= document.selection.createRange(); 
     if (range.parentElement()===input) { 
      var start= -range.moveStart('character', -10000000); 
      var end= -range.moveEnd('character', -10000000); 
      range.moveToElementText(input); 
      var error= -range.moveStart('character', -10000000); 
      start-= error; 
      end-= error; 
     } 
    } 
    return [ 
     value.substring(0, start), 
     value.substring(start, end), 
     value.substring(end) 
    ]; 
} 

// setPartitionedValue: set the value text and selected region in an input/ 
// textarea. 
// 
function setPartitionedValue(input, value) { 
    var oldtop= input.scrollTop!==undefined? input.scrollTop : null; 
    input.value= value.join(''); 
    input.focus(); 
    var start= value[0].length; 
    var end= value[0].length+value[1].length; 
    if (input.selectionStart!==undefined) { 
     input.selectionStart= start; 
     input.selectionEnd= end; 
     if (oldtop!==null) 
      input.scrollTop= oldtop; 
    } 
    else if (document.selection!==undefined) { 
     var range= input.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', end); 
     range.moveStart('character', start); 
     range.select(); 
    } 
} 

Answer 4

btw, यह भी देखें:
http://aspalliance.com/346_Tabbing_in_the_TextArea