एक पाठ सम्मिलित करना जहां कर्सर जावास्क्रिप्ट / jquery का उपयोग कर रहा है

Question

मेरे पास बहुत सारे टेक्स्टबॉक्स के साथ एक पेज है। जब कोई लिंक पर क्लिक करता है, तो मैं चाहता हूं कि एक शब्द या दो डाला जाए जहां कर्सर है, या टेक्स्टबॉक्स में जोड़ा गया है जिसमें फोकस है।

उदाहरण के लिए, यदि कर्सर / फ़ोकस एक टेक्स्टबॉक्स पर है जो 'ऐप्पल' कह रहा है और वह '[ईमेल]' कहते हुए एक लिंक पर क्लिक करता है, तो मैं चाहता हूँ कि टेक्स्टबॉक्स 'सेब [e-mail]' कहे।

मैं यह कैसे कर सकता हूँ? क्या यह तब भी संभव है, जब से रेडियो / ड्रॉपडाउन / गैर टेक्स्टबॉक्स तत्व पर ध्यान केंद्रित किया जाता है? क्या टेक्स्टबॉक्स पर अंतिम ध्यान केंद्रित किया जा सकता है?

Comments

मुझे लगता है कि यह संभव है क्योंकि यह WYSISYG संपादकों का आधार है, यह कैसे करना है, मुझे नहीं पता।

— इयान इलियट

संभव है कि मैं जावास्क्रिप्ट के साथ कैरेट पर एक चरित्र कैसे डालूं?

— जॉन

यह सवाल पूछने के लिए धन्यवाद ... अब मैं अपने क्रोम एक्सटेंशन के साथ कर्सर पर "[संस्करण]" डाल सकता हूं!

— हयकम

यदि आप पूर्ववत समर्थन के साथ एक सरल मॉड्यूल की तलाश कर रहे हैं, तो सम्मिलित-पाठ-टेक्स्टारिया का प्रयास करें । यदि आपको IE8 + समर्थन की आवश्यकता है, तो सम्मिलित-पाठ-पर-कर्सर पैकेज का प्रयास करें।

— फ्रीगर्ल

Answer 1

इसका उपयोग यहां से करें :

function insertAtCaret(areaId, text) {
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  txtarea.scrollTop = scrollPos;
}

<textarea id="textareaid"></textarea>
<a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>

Comments

इसने बहुत अच्छा काम किया, लेकिन यह चयनित पाठ को बदलने का काम नहीं करता जैसा कि सभी पाठ संपादक करते हैं। यह पोस्टर के मूल प्रश्न के लिए आवश्यक नहीं हो सकता है, लेकिन यदि आपको इसकी आवश्यकता है, तो आप 'strPos' को 'txtArea.selectionEnd' से बदल सकते हैं। यदि आप IE के पुराने संस्करणों का समर्थन करने की आवश्यकता नहीं है, तो नीचे दिए गए मेरे जवाब से यह पता चलता है, ब्राउज़र का पता लगाने के कोड को हटाने के साथ।

— जेफरी हार्मन

क्या सभी तत्वों का चयन करने का कोई तरीका है areaId?

— हयकम

आप इस तरह से फंक्शन डालकर ऑटो डिलीट चयनित टेक्स्ट को प्राप्त कर सकते हैं। function deleteTxt() { var ele = document.getElementById('yourTextarea'); var text = ele.value; text = text.slice(0, ele.selectionStart) + text.slice(ele.selectionEnd); ele.value = text; return text; }

— NSTuttle

माउस पोजीशन पर टेक्स्ट कैसे डालें?

— थामराई टी

आप सर्वश्रेष्ठ हैं!

— एको सैंटोसो

Answer 2

शायद एक छोटा संस्करण, समझना आसान होगा?

    jQuery("#btn").on('click', function() {
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "stuff";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

मैंने यह लिखा था कि कैसे एक पाठ बॉक्स में पाठ जोड़ने के लिए सूचक के वर्तमान स्थिति से jquery के साथ?

Comments

तुम भी साथ मूल्य बदलने के बाद कैरट स्थिति बहाल कर सकते हैं: document.getElementById("txt").selectionStart = caretPos + txtToAdd.length।

— ब्‍लडवारफ

मेरे लिए काम किया, धन्यवाद। FYI करें "चयनस्टार्ट" संपत्ति jquery चयनकर्ता $ ("#") के माध्यम से मौजूद नहीं है। आपको document.getElementById ()

— Lego

jsfiddle.net/NaHTw/802 आपके समाधान को थोड़े अतिरिक्त के साथ जोड़ा गया है जो चयनित क्षेत्र को पेस्ट करने के लिए बदल दिया गया है

— patrick

ठीक है, अगर आप उस jQuery को दूर करने जा रहे हैं, तो आप यह सब हटा सकते हैं । ; ^)

— रफिन

बस मदद करने के लिए, कैरेट पोजिशन रिस्टोर प्लस के साथ पूरा समाधान पेस्ट की गई सामग्री के साथ चयनित क्षेत्र को बदलें: jsfiddle.net/NaHTw/1028

— AlfaTeK

Answer 3

जॉर्ज क्लघोर्न के स्वीकृत जवाब ने कर्सर की स्थिति में केवल पाठ डालने के लिए बहुत अच्छा काम किया। यदि उपयोगकर्ता ने पाठ का चयन किया था, और आप चाहते हैं कि पाठ को प्रतिस्थापित किया जाए (अधिकांश पाठ के साथ डिफ़ॉल्ट अनुभव), तो आपको 'बैक' वैरिएबल सेट करते समय एक छोटा सा बदलाव करना होगा।

इसके अलावा, यदि आपको IE के पुराने संस्करणों का समर्थन करने की आवश्यकता नहीं है, तो आधुनिक संस्करण textarea.selectionStart का समर्थन करते हैं, इसलिए आप सभी ब्राउज़र का पता लगाने, और IE- विशिष्ट कोड निकाल सकते हैं।

यहां एक सरलीकृत संस्करण है जो क्रोम और IE11 के लिए कम से कम काम करता है, और चयनित पाठ की जगह संभालता है।

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    txtarea.value = front + text + back;
    caretPos = caretPos + text.length;
    txtarea.selectionStart = caretPos;
    txtarea.selectionEnd = caretPos;
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

Comments

यह अच्छा है, लेकिन यह तत्व maxlengthको ध्यान में नहीं रखता है, इसलिए सम्मिलित होने के बाद परिणामी मूल्य अधिकतम से अधिक हो सकता है।

— mbomb007

Answer 4

ऊपर दिए गए कोड ने IE में मेरे लिए काम नहीं किया। इस उत्तर पर आधारित कुछ कोड यहां दिए गए हैं ।

मैंने बाहर निकाल लिया getElementByIdइसलिए मैं तत्व को अलग तरीके से संदर्भित कर सकता हूं।

function insertAtCaret(element, text) {
  if (document.selection) {
    element.focus();
    var sel = document.selection.createRange();
    sel.text = text;
    element.focus();
  } else if (element.selectionStart || element.selectionStart === 0) {
    var startPos = element.selectionStart;
    var endPos = element.selectionEnd;
    var scrollTop = element.scrollTop;
    element.value = element.value.substring(0, startPos) +
      text + element.value.substring(endPos, element.value.length);
    element.focus();
    element.selectionStart = startPos + text.length;
    element.selectionEnd = startPos + text.length;
    element.scrollTop = scrollTop;
  } else {
    element.value += text;
    element.focus();
  }
}

input{width:100px}
label{display:block;margin:10px 0}

<label for="in2copy">Copy text from: <input id="in2copy" type="text" value="x"></label>
<label for="in2ins">Element to insert: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="insertAtCaret(document.getElementById('in2ins'),document.getElementById('in2copy').value)">Insert</button>

संपादित करें: एक रनिंग स्निपेट जोड़ा गया, jQuery का उपयोग नहीं किया जा रहा है ।

Comments

तत्व एक jquery वस्तु है या नहीं? element.value और element.focus () दोनों काम नहीं कर सकते ...

— स्कॉट स्टैफ़ोर्ड

element.focus()डॉकल्स पर एक वैध जावास्क्रिप्ट तरीका है: w3schools.com/jsref/met_html_focus.asp

— oliverseal

आईई संगतता को छोड़ने के लिए सबसे अच्छा विचार है।

— ar2015

हाँ, मैंने यह उत्तर 7 साल पहले लिखा था। इस बिंदु पर IE 11 एक अच्छा न्यूनतम समर्थित संस्करण है, और ऊपर दिया गया कोड वहां काम करता है।

— कोलिन एंडरसन

Answer 5

@quick_sliv उत्तर का उपयोग करना:

function insertAtCaret(el, text) {
    var caretPos = el.selectionStart;
    var textAreaTxt = el.value;
    el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};

Answer 6

JQuery और जावास्क्रिप्ट के माध्यम से एक TextBox के वर्तमान कर्सर स्थिति के लिए कुछ पाठ कैसे सम्मिलित करें

प्रक्रिया

1. वर्तमान कर्सर स्थिति का पता लगाएं
2. पाठ को कॉपी करें
3. वहां पर टेक्स्ट सेट करें
4. कर्सर की स्थिति अपडेट करें

यहाँ मेरे पास 2 TextBox और एक बटन है। मुझे एक टेक्स्टबॉक्स पर एक निश्चित स्थिति पर क्लिक करना होगा और फिर टेक्स्ट को दूसरे टेक्स्टबॉक्स से पिछले टेक्स्टबॉक्स की स्थिति में पेस्ट करने के लिए बटन पर क्लिक करना होगा।

यहां मुख्य मुद्दा यह है कि वर्तमान कर्सर स्थिति प्राप्त करना जहां हम टेक्स्ट पेस्ट करेंगे।

//Textbox on which to be pasted
<input type="text" id="txtOnWhichToBePasted" />

//Textbox from where to be pasted
<input type="text" id="txtFromWhichToBePasted" />


//Button on which click the text to be pasted
<input type="button" id="btnInsert" value="Insert"/>


<script type="text/javascript">

$(document).ready(function () {
    $('#btnInsert').bind('click', function () {
            var TextToBePasted = $('#txtFromWhichToBePasted').value;
            var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');

            //Paste the Text
            PasteTag(ControlOnWhichToBePasted, TextToBePasted);
        });
    });

//Function Pasting The Text
function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
    //Get the position where to be paste

    var CaretPos = 0;
    // IE Support
    if (document.selection) {

        ControlOnWhichToBePasted.focus();
        var Sel = document.selection.createRange();

        Sel.moveStart('character', -ctrl.value.length);

        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
        CaretPos = ControlOnWhichToBePasted.selectionStart;

    //paste the text
    var WholeString = ControlOnWhichToBePasted.value;
    var txt1 = WholeString.substring(0, CaretPos);
    var txt2 = WholeString.substring(CaretPos, WholeString.length);
    WholeString = txt1 + TextToBePasted + txt2;
    var CaretPos = txt1.length + TextToBePasted.length;
    ControlOnWhichToBePasted.value = WholeString;

    //update The cursor position 
    setCaretPosition(ControlOnWhichToBePasted, CaretPos);
}

function setCaretPosition(ControlOnWhichToBePasted, pos) {

    if (ControlOnWhichToBePasted.setSelectionRange) {
        ControlOnWhichToBePasted.focus();
        ControlOnWhichToBePasted.setSelectionRange(pos, pos);
    }
    else if (ControlOnWhichToBePasted.createTextRange) {
        var range = ControlOnWhichToBePasted.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

</script>

Answer 7

वर्तमान कर्सर स्थिति में पाठ जोड़ने में दो चरण शामिल हैं:

1. वर्तमान कर्सर स्थिति पर पाठ जोड़ना
2. वर्तमान कर्सर स्थिति को अद्यतन करना

डेमो: https://codepen.io/anon/pen/qZXmgN

क्रोम 48, फ़ायरफ़ॉक्स 45, आईई 11 और एज 25 में परीक्षण किया गया

जे एस:

function addTextAtCaret(textAreaId, text) {
    var textArea = document.getElementById(textAreaId);
    var cursorPosition = textArea.selectionStart;
    addTextAtCursorPosition(textArea, cursorPosition, text);
    updateCursorPosition(cursorPosition, text, textArea);
}
function addTextAtCursorPosition(textArea, cursorPosition, text) {
    var front = (textArea.value).substring(0, cursorPosition);
    var back = (textArea.value).substring(cursorPosition, textArea.value.length);
    textArea.value = front + text + back;
}
function updateCursorPosition(cursorPosition, text, textArea) {
    cursorPosition = cursorPosition + text.length;
    textArea.selectionStart = cursorPosition;
    textArea.selectionEnd = cursorPosition;
    textArea.focus();    
}

HTML:

<div>
    <button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
</div>
<textarea id="textArea" rows="20" cols="50"></textarea>

Answer 8

मुझे लगता है कि आप अंतिम-केंद्रित टेक्स्टबॉक्स को ट्रैक करने के लिए निम्नलिखित जावास्क्रिप्ट का उपयोग कर सकते हैं:

<script>
var holdFocus;

function updateFocus(x)
{
    holdFocus = x;
}

function appendTextToLastFocus(text)
{
    holdFocus.value += text;
}
</script>

उपयोग:

<input type="textbox" onfocus="updateFocus(this)" />
<a href="#" onclick="appendTextToLastFocus('textToAppend')" />

एक पिछला समाधान (gpsaghorn के लिए सहारा) textarea का उपयोग करता है और कर्सर की स्थिति की भी गणना करता है, इसलिए यह आपके लिए बेहतर हो सकता है कि आप क्या चाहते हैं। दूसरी ओर, यह एक और अधिक हल्का होगा, यदि आप यही देख रहे हैं।

Comments

अच्छा विचार। मैं jquery का उपयोग करता था इसलिए प्रत्येक टेक्स्टबॉक्स में एक निश्चित वर्ग था, इस घटना को प्रत्येक टेक्स्टबॉक्स के HTML में "onfocus = ..." डालने के बजाय उन पर लागू किया गया था। लेकिन अच्छा तरीका :)

— क्लिक करें

Answer 9

स्वीकृत उत्तर मेरे लिए Internet Explorer 9 पर काम नहीं कर रहा था। मैंने इसकी जाँच की और ब्राउज़र का पता लगाना ठीक से काम नहीं कर रहा था, इसने ff का पता लगाया कि जब मैं Internet Explorer में था तब (फ़ायरफ़ॉक्स) का था।

मैंने अभी-अभी यह परिवर्तन किया है:

if ($.browser.msie) 

के बजाय:

if (br == "ie") { 

परिणामी कोड यह एक है:

function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );

    if ($.browser.msie) { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

Answer 10

यह jQuery प्लगइन आपको चयन / कैरेट हेरफेर का पूर्व-निर्मित तरीका देता है।

Answer 11

आप केवल आवश्यक टेक्स्टबॉक्स पर ध्यान केंद्रित कर सकते हैं, वहां टेक्स्ट डालें। यह पता लगाने का कोई तरीका नहीं है कि एएफएआईवाई कहां है (हो सकता है कि सभी डोम नोड्स में अंतर हो?)।

इस स्टैकओवरफ़्लो की जांच करें - इसका आपके लिए एक समाधान है: मुझे कैसे पता चलेगा कि किस डोम तत्व का फोकस है?

Answer 12

सामग्री संपादन योग्य, HTML या कोई अन्य DOM तत्व चयन

यदि आप कैरेट पर डालने की कोशिश कर रहे हैं <div contenteditable="true">, तो यह और अधिक कठिन हो जाता है, खासकर अगर संपादन योग्य कंटेनर के भीतर बच्चे हैं।

मुझे वास्तव में रंगी लाइब्रेरी का उपयोग करने का सौभाग्य मिला है :

• GIT: https://github.com/timdown/rangy
• एनपीएम: https://www.npmjs.com/package/rangy

यह इस तरह के रूप में महान सुविधाओं की एक टन है:

• स्थिति या चयन सहेजें
• फिर बाद में, स्थिति या चयन को पुनर्स्थापित करें
• चयन HTML या प्लेनटेक्स्ट प्राप्त करें
• कई अन्य के बीच

ऑनलाइन डेमो काम नहीं कर रहा था अंतिम मैंने जांच की, हालांकि रेपो में काम करने वाले डेमो हैं। आरंभ करने के लिए, Git या NPM से सरल डाउनलोड करें, फिर खोलें ./rangy/demos/index.html

यह कार्यवाहक स्थिति और पाठ चयन के साथ एक हवा का काम करता है!

Answer 13

इस प्रश्न का उत्तर इतनी देर पहले पोस्ट किया गया था और मैंने Google खोज के माध्यम से इस पर ठोकर खाई। HTML5 HTMLInputElement API प्रदान करता है जिसमें setRangeText () विधि शामिल है, जो एक नए स्ट्रिंग के साथ <input>या <textarea>तत्व में पाठ की एक श्रृंखला को प्रतिस्थापित करता है:

element.setRangeText('abc');

ऊपर के elementसाथ चयन अंदर की जगह लेगा abc। आप यह भी निर्दिष्ट कर सकते हैं कि इनपुट वैल्यू के किस हिस्से को बदलना है:

element.setRangeText('abc', 3, 5);

ऊपर इनपुट मूल्य के साथ 6 वें वर्ण तक 4 को प्रतिस्थापित करेगा abc। आप यह भी निर्दिष्ट कर सकते हैं कि पाठ को 4 वें पैरामीटर के रूप में निम्न स्ट्रिंग्स में से एक प्रदान करके प्रतिस्थापित करने के बाद चयन कैसे सेट किया जाना चाहिए:

• 'preserve'चयन को संरक्षित करने का प्रयास करता है। यह डिफ़ॉल्ट है।
• 'select' नए सम्मिलित पाठ का चयन करता है।
• 'start' सम्मिलित पाठ से पहले चयन को स्थानांतरित करता है।
• 'end' सम्मिलित पाठ के बाद चयन को स्थानांतरित करता है।

ब्राउज़र संगतता

सेटरेंजटेक्स्ट के लिए एमडीएन पेज ब्राउज़र संगतता डेटा प्रदान नहीं करता है, लेकिन मुझे लगता है कि यह HTMLInputElement.setSelectionRange () के समान होगा , जो मूल रूप से सभी आधुनिक ब्राउज़रों, IE 9 और ऊपर, एज 12 और ऊपर है।