पाठ इनपुट फ़ील्ड के भीतर कर्सर की स्थिति (वर्णों में) प्राप्त करें

Question

मैं इनपुट क्षेत्र में कार्यवाहक स्थिति कैसे प्राप्त कर सकता हूं?

मुझे Google के माध्यम से कुछ बिट्स और टुकड़े मिले हैं, लेकिन बुलेट प्रूफ कुछ भी नहीं है।

मूल रूप से jQuery प्लगइन जैसा कुछ आदर्श होगा, इसलिए मैं बस कर सकता था

$("#myinput").caretPosition()

Comments

'कर्सर की स्थिति' के लिए खोज करने का प्रयास करें, इससे आपको बहुत अधिक हिट मिलेंगे, साथ ही एसओ पर इसके बारे में कुछ विषय।

— एलेक

डुप्लिकेट की कर्सर स्थिति कैसे प्राप्त करें? । इसे भी देखें: फील्डसेलेक्शन प्लगइन

— CMS

@ सीएमएस एक <input>तरह से स्थिति को खोजने के लिए इसे करने में आसान है <textarea>।

— एंड्रयू माओ

@AndrewMao: और अगर पाठ को स्क्रॉल किया जाता है और कैरेट पिछले sizeअक्षर है तो अधिक कठिन है ।

— डेन डैस्कलेस्क्यू

@alec: मैं सहमत हूं कि कैरेट के बजाय कर्सर की खोज करने से अधिक परिणाम मिल सकता है। जैसा कि कहीं और कहा गया है, मैंने सीखा कि कैरेट अधिक उपयुक्त शब्द है। एक कर्सर किसी भी चीज में एक स्थान का प्रतिनिधित्व करता है जबकि एक कैरेट विशेष रूप से पाठ में एक स्थान का प्रतिनिधित्व करता है।

— Suncat2000

Answer 1

आसान अद्यतन:

field.selectionStart इस उत्तर में उदाहरण का उपयोग करें ।

इसे इंगित करने के लिए @commonSenseCode का धन्यवाद।

---

पुराना उत्तर:

यह समाधान मिला। Jquery आधारित नहीं है, लेकिन इसे jquery में एकीकृत करने के लिए कोई समस्या नहीं है:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

Comments

else if (oField.selectionStart || oField.selectionStart == '0')हो सकता हैelse if (typeof oField.selectionStart==='number')

— user2428118

"OField.focus ()" का विचार क्या है? यह मेरे लिए इस लाइन के बिना काम करता है। यदि आप अपने इनपुट पर धब्बा घटना का उपयोग करते हैं और कॉलबैक के अंदर उस फ़ंक्शन को निष्पादित करते हैं तो सावधान रहें।

— किरिल रेजनिकोव

क्या आप IE पर परीक्षण कर रहे हैं? वह पूरी अगर सेक्शन केवल IE पर निष्पादित की जाती है। IE में केवल एक वैश्विक चयन होता है, इसीलिए यह ऐसा है document.selection, न कि field.selectionकुछ। इसके अलावा, यह IE 7 में संभव था (कुछ नहीं का चयन करने के लिए 8+ में अभी भी संभव है पता नहीं है), और फिर चयन खोने के बिना मैदान से बाहर ताब। इस तरह, जब पाठ का चयन किया जाता है, लेकिन क्षेत्र केंद्रित नहीं होता है, तो document.selectionशून्य चयन देता है। इसीलिए, इस बग के लिए एक समाधान के रूप में, आपको पढ़ने से पहले तत्व पर ध्यान केंद्रित करना होगा document.selection।

— बेज़मैक्स

हमेशा क्रोम और फ़ायरफ़ॉक्स के लिए 0 प्राप्त करना

— कौशिक थानकी

Answer 2

एक अच्छा, मैक्स के लिए बड़ा धन्यवाद।

मैंने jQuery में उनके उत्तर में कार्यक्षमता को लपेटा है यदि कोई इसका उपयोग करना चाहता है।

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

Comments

के input = $(this).get(0)रूप में ही नहीं है input = this?

— माइक

@Mic नहीं, jQuery प्लगइन में नहीं। एक प्लगइन thisमें एक पूर्ण लिपटे सेट को संदर्भित करता है। उसका कोड अभी भी गलत है, यह सिर्फ होना चाहिए this.get(0)। उनके कोड ने शायद अभी भी काम किया है क्योंकि एक लिपटे सेट को फिर से लपेटने से कुछ नहीं होता है।

— चेव

इससे मुझे गलत जानकारी मिलती है। मैं टेक्स्ट को एंटर करते समय कर्सर की स्थिति को देख रहा था। यह प्रदर्शित करने वाली मेरी

— फिडेल

जब इनपुट संख्या प्रकार का होता है, तो Firefox एक NS_ERROR_FAILURE इनपुट पर बनाता है। इसे {} कैच {} में आज़माएं?

— niall.campbell

नई मधुमक्खियों के लिए अच्छा होगा यदि आप इस समारोह के लिए उपयोग जोड़ते हैं

— मुहम्मद ओमर असलम

Answer 3

बहुत आसान

अद्यतन उत्तर

उपयोग करें selectionStart, यह सभी प्रमुख ब्राउज़रों के साथ संगत है ।

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})

<input id="foobar" />

अद्यतन: यह केवल तभी काम करता है जब कोई प्रकार परिभाषित नहीं होता है या type="text"इनपुट पर होता है।

Comments

यदि मैं माउस का उपयोग करके स्थिति बदलता हूं, तो यह कंसोल में मुद्रित नहीं होता है। क्या इसे ठीक करने का कोई तरीका है?

— यूजीन बार्स्की

@EugeneBarsky बस क्लिक इवेंट के लिए एक नया ईवेंट श्रोता जोड़ें। आप .selectionStartकिसी भी समय संपत्ति की जांच कर सकते हैं ( document.getElementById('foobar').selectionStart), यह एक घटना श्रोता के अंदर नहीं है।

— JJJ

भयानक है, लेकिन इनपुट प्रकार संख्या होने पर फ़ायरफ़ॉक्स या क्रोम में काम नहीं करता है।

— एडम आर। ग्रे

Answer 4

बहुत ही सरल उपाय मिला । सत्यापित परिणाम के साथ निम्नलिखित कोड आज़माएं-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

मैं तुम्हें fiddle_demo दे रहा हूं

Comments

sliceएक अपेक्षाकृत महंगा ऑपरेशन है और यह इस 'समाधान' के लिए कुछ भी नहीं जोड़ता है - el.selectionStartआपके स्लाइस की लंबाई के बराबर है; बस वही लौटें। इसके अलावा, कारण अन्य समाधान अधिक जटिल हैं क्योंकि वे अन्य ब्राउज़रों के साथ काम करते हैं जो समर्थन नहीं करते हैं selectionStart।

— एमपैन

मैंने नौकरी छोड़ दी है जहां मुझे इस तरह के चर नामों के साथ कोड के साथ काम करना था।

— माइकल स्काइपर

@ मिचेल शेपर - आप का अर्थ है 'एल' तत्व के लिए और वैल्यू के लिए 'वैल'? वे बहुत आम हैं ...

— 2:27 पर user2782001

@ user2782001: मुझे याद है - मेरा मुख्य चिंता कार्य नाम था। f1'user2782001' जितना ही सार्थक है। 😉

— माइकल शेपर

Answer 5

इसके लिए अब एक अच्छा प्लगइन है: द कैरट प्लगिन

तब आप इसका उपयोग करके $("#myTextBox").caret()या इसके माध्यम से सेट कर सकते हैं$("#myTextBox").caret(position)

Comments

कैरेट प्लगइन

— टेक्सटेरिया

वैसे मुझे यह <इनपुट प्रकार = "टेक्स्ट" आईडी = "myTextBox" /> के लिए काम कर रहा है और उपरोक्त कोड का उपयोग करें।

— जेन मिकेलसेन

Answer 6

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

Answer 7

यहां कुछ अच्छे उत्तर पोस्ट किए गए हैं, लेकिन मुझे लगता है कि आप अपने कोड को सरल बना सकते हैं और inputElement.selectionStartसमर्थन के लिए चेक को छोड़ सकते हैं : यह केवल IE8 और पहले ( प्रलेखन देखें ) पर समर्थित नहीं है जो वर्तमान ब्राउज़र उपयोग के 1% से कम का प्रतिनिधित्व करता है ।

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}

Answer 8

शायद आपको कर्सर की स्थिति के अलावा एक चयनित सीमा की आवश्यकता है। यहाँ एक सरल कार्य है, आपको jQuery की भी आवश्यकता नहीं है:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

मान लें कि आप इसे इनपुट पर कॉल करना चाहते हैं जब भी यह बदलता है या माउस कर्सर की स्थिति को बदलता है (इस मामले में हम jQuery का उपयोग कर रहे हैं .on())। प्रदर्शन कारणों के लिए, यह जोड़ना अच्छा हो सकता setTimeout()है कि _debounce()यदि घटनाएँ घट रही हैं तो अंडरस्कोर जैसे कुछ जोड़ना या जोड़ना

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

यदि आप इसे आज़माना चाहते हैं तो एक फ़िदा है: https://jsfiddle.net/Dhaupin/91189tq7/

Answer 9

const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets  inputs .
var swch;
// swch  if corsur is active in inputs defaulte is false .
var isSelect = false;

var crnselect;
// on focus
function setSwitch(e) {
  swch = e;
  isSelect = true;
  console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
  if (isSelect) {
    console.log("emoji added :)");
    swch.value += ":)";
    swch.setSelectionRange(2,2 );
    isSelect = true;
  }

}
// on not selected on input . 
function onout() {
  // الافنت  اون كي اب 
  crnselect = inpC.selectionStart;
  
  // return input select not active after 200 ms .
  var len = swch.value.length;
  setTimeout(() => {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}

<h1> Try it !</h1>
    
		<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
		<input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>