Html टेक्स्टबॉक्स में कीबोर्ड कैरट पोजीशन सेट करें

Question

क्या किसी को पता है कि टेक्स्ट बॉक्स में कीबोर्ड कैरेट को किसी विशेष स्थिति में कैसे स्थानांतरित किया जाए?

उदाहरण के लिए, यदि एक टेक्स्ट-बॉक्स (जैसे इनपुट एलिमेंट, टेक्स्ट-एरिया नहीं) में 50 अक्षर हैं और मैं कैरक्टर को कैरेक्टर 20 से पहले रखना चाहता हूं, तो मैं इसके बारे में कैसे जाऊंगा?

यह इस प्रश्न से भिन्नता में है: पाठ क्षेत्र में jQuery सेट कर्सर स्थिति , जिसे jQuery की आवश्यकता है।

Answer 1

एक पाठ बॉक्स या जावास्क्रिप्ट के साथ TextArea में जोश स्टोडोला के सेटिंग कीबोर्ड की स्थिति के कुछ अंश

एक सामान्य कार्य जो आपको टेक्स्टबॉक्स या टेक्स्टारिया के किसी भी स्थान पर कैरेट सम्मिलित करने की अनुमति देगा जो आप चाहते हैं:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

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

IE6 और ऊपर, फ़ायरफ़ॉक्स 2, ओपेरा 8, नेटस्केप 9, सीमोंकी और सफारी पर परीक्षण किया गया। दुर्भाग्य से सफारी पर यह ऑनफोकस घटना के साथ संयोजन में काम नहीं करता है)।

जब वे फ़ोकस प्राप्त करते हैं, तो पृष्ठ पर सभी टेक्स्टारैस के अंत में जाने के लिए कीबोर्ड केअर को मजबूर करने के लिए उपरोक्त फ़ंक्शन का उपयोग करने का एक उदाहरण:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Comments

if(elem.selectionStart)जब ब्रेकस्टार्ट का चयन 0 होता है, तब भी झाँस के उत्तर द्वारा बताया जाता है।

— १२:१२

यह मेरे लिए काम नहीं करता है। जब मैं वास्तविक टेक्स्टबॉक्स पर क्लिक करता हूं, तो मुझे उम्मीद है कि शुरुआत में कैरेट की स्थिति बेहतर होगी। मेरे

— फिडेल

SetCaretPosition फ़ंक्शन ठीक काम करता है। आपका AddActionHandler फ़ंक्शन, हालांकि, नहीं करता है। लेकिन इसके बिना भी, मुझे ध्यान केंद्रित करने के लिए कर्सर नहीं मिला। सबसे अधिक संभावना है, यह इसलिए है क्योंकि ब्राउज़र क्लिक की स्थिति के आधार पर कर्सर की स्थिति स्वयं निर्धारित करता है। लगता है कि मैं जो कुछ भी बता सकता हूं, उसके आसपास ऐसा कोई रास्ता नहीं है, लेकिन मैं पूरी तरह से गलत हो सकता हूं।

— GJK

IE9, FF25 में काम करता है, लेकिन Chrome 30 नहीं। कोई नहीं से बेहतर!

— Umber Ferrule

मेरे पास elem.value = elem.value.replace(/^9/g,'+79')कोड है। ओपेराएमिनी कर्सर के बाद +। इस समारोह नहीं मदद करता है

— इरी

Answer 2

उत्तर में लिंक टूट गया है, यह काम करना चाहिए (सभी क्रेडिट ब्लॉग पर जाएं ।vishalon.net ):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

यदि कोड फिर से खो जाता है, तो यहां दो मुख्य कार्य हैं:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


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

Comments

आधार कार्यों के लिए +1, हालांकि कुछ समायोजन किए जाने हैं । सीमा विधि का उपयोग करते समय लाइनों की संख्या को "पॉस" से अलग किया जाना चाहिए।

— रोब डब्ल्यू

Answer 3

चूंकि मुझे वास्तव में इस समाधान की आवश्यकता थी, और विशिष्ट बेसलाइन समाधान ( इनपुट पर ध्यान दें - फिर मूल्य को स्वयं के बराबर सेट करें ) क्रॉस-ब्राउज़र काम नहीं करता है , मैंने इसे काम करने के लिए कुछ समय ट्विक करने और सब कुछ संपादित करने में बिताया। @ Kd7 पर निर्माण के कोड का रहा हूँ।

का आनंद लें! IE6 +, फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा में काम करता है

क्रॉस-ब्राउज़र कैरेट पोजिशनिंग तकनीक (उदाहरण: कर्सर को END में ले जाना)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

मांस और आलू मूल रूप से @ kd7 का सेटपर्सपोज़िशन है, जिसमें सबसे बड़ा ट्विस्ट है, if (el.selectionStart || el.selectionStart === 0)फ़ायरफ़ॉक्स में सेलेक्शनस्टार्ट 0 से शुरू हो रहा है। , जो कि निश्चित रूप से बूलियन फाल्स में बदल रहा है, इसलिए यह वहां टूट रहा था।

क्रोम में सबसे बड़ा मुद्दा यह था कि बस देने के लिए यह .focus()पर्याप्त नहीं था (यह पाठ के सभी का चयन करता रहा!) इसलिए, हम el.value = el.value;अपने फ़ंक्शन को कॉल करने से पहले खुद के लिए खुद का मूल्य निर्धारित करते हैं, और अब इसकी एक समझ और स्थिति है इनपुट का उपयोग करने selectionstart ।

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Comments

@mcpDESIGNS मैं इस फ़ंक्शन का उपयोग करने की कोशिश कर रहा हूं जब एक पाठ इनपुट पर ध्यान केंद्रित किया गया है, लेकिन मैं कहीं नहीं हूं, क्या आप शुद्ध जावास्क्रिप्ट का उपयोग करके इस फ़ंक्शन को लागू करने में मदद कर सकते हैं?

— इलाद.चैन

@ elad.chen क्या आप उन्हें टेक्स्टबॉक्स के अंत में स्थित करने की कोशिश कर रहे हैं जैसे ही वे उस पर ध्यान केंद्रित करते हैं?

— मार्क पिज़्ज़ाक - ट्रिलोन.आईओ

@mcpDESIGNS मैं तत्व की शुरुआत में कर्सर को जगह देना चाहता हूं जैसे ही तत्व केंद्रित किया जा रहा है।

— फिडेल

@ elad.chen पागल देर से प्रतिक्रिया के लिए क्षमा करें! अपने खोज_फ़ील्ड_फोकस फ़ंक्शन के .onclickबजाय केवल उस घटना को बदलें.onfocus

— मार्क पीज़्ज़क - ट्रिलोन

el.value = el.value; [...] if(el !== null)- मैं इन दो लाइनों स्वैप होगा। यदि elअशक्त है, el.value = el.valueतो विफल हो जाएगा, इसलिए वह रेखा अंदर होनी चाहिए if।

— बैकलैश

Answer 4

मैंने kd7 के उत्तर को थोड़ा सा समायोजित किया है क्योंकि चुनाव के बाद जब एलटी.सेलेक्शनस्टार्ट झूठी का मूल्यांकन करेगा तो घटना 0 होगी।

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

Answer 5

मुझे इस समस्या को ठीक करने का एक आसान तरीका मिला, जिसका परीक्षण IE और क्रोम में किया गया:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

इस फंक्शन में टेक्स्ट बॉक्स आईडी और कैरेट पोज़िशन पास करें।

Answer 6

यदि आपको कुछ टेक्स्टबॉक्स पर ध्यान केंद्रित करने की आवश्यकता है और आपकी एकमात्र समस्या यह है कि संपूर्ण पाठ हाइलाइट हो जाता है, जबकि आप चाहते हैं कि कैरेट अंत में हो, तो उस विशिष्ट स्थिति में, आप फोकस के बाद टेक्स्टबॉक्स मान सेट करने की इस ट्रिक का उपयोग कर सकते हैं:

$("#myinputfield").focus().val($("#myinputfield").val());

Answer 7

<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>

Answer 8

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

Comments

अन टाइप किए गए टाइपर: ऑब्जेक्ट [ऑब्जेक्ट HTMLInputElement] का कोई तरीका नहीं है 'शुरू होता है'

— bobpaul

@bobpaul: tIDतत्व का आईडी होना चाहिए, न कि तत्व वस्तु का। यदि आप तत्व ऑब्जेक्ट पास कर रहे हैं, तो आप इस विधि में केवल 2 पहली पंक्तियाँ निकाल सकते हैं, और यह काम करेगा।

— खौफ

Answer 9

मैं नीचे दिए गए शर्तों को ठीक करूंगा:

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}