javascript input - ضع علامة الإقحام لوحة المفاتيح في textbox html




type textarea (7)

الرابط في الجواب مكسور ، يجب أن يعمل هذا (جميع الاعتمادات تذهب إلى blog.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();
 }
}

هل يعرف أي شخص كيفية تحريك علامة الإقحام لوحة المفاتيح في مربع نص إلى موضع معين؟

على سبيل المثال ، إذا كان مربع النص (على سبيل المثال ، عنصر الإدخال ، وليس منطقة النص) يحتوي على 50 حرفًا وأريد وضع علامة الإقحام قبل الحرف 20 ، فكيف أذهب نحو ذلك؟

هذا في تمايز من هذا السؤال: jQuery Set Cursor Position في Text Area ، والذي يتطلب jQuery.


<!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>

لقد قمت بتعديل إجابة kd7 قليلاً لأن elem.selectionStart سيقيم إلى false عند تحديد startStart 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);
        }
    }
}

إذا كنت بحاجة إلى التركيز على بعض مربعات النص والمشكلة الوحيدة هي أن النص بأكمله يتم إبرازه بينما تريد أن يكون حرف الإقحام في النهاية ، ففي هذه الحالة المحددة ، يمكنك استخدام هذه الخدعة لتعيين قيمة مربع النص لنفسه بعد التركيز:

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

نظرًا لأنني في الواقع بحاجة إلى هذا الحل بالفعل ، ولم يعمل الحل الأساسي النموذجي ( تركيز الإدخال - ثم تعيين القيمة مساوية لنفسه ) - عبر المتصفح ، فقد أمضيت بعض الوقت في تعديل كل شيء وتحريره للحصول عليه. بناء على رمز @ 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

اللحوم والبطاطا هي أساسا setCaretPosition @ kd7 ، مع أكبر قرص if (el.selectionStart || el.selectionStart === 0) ، في فايرفوكس يبدأ if (el.selectionStart || el.selectionStart === 0) عند 0 ، وهو منطقي يتحول بالطبع إلى خطأ ، لذلك كان هناك كسر.

في الكروم ، كانت المشكلة الأكبر هي أن إعطاءها فقط .focus() لم يكن كافياً (فقد استمر في اختيار كل النص!) ومن ثم ، قمنا بتعيين قيمة نفسه ، إلى نفسه el.value = el.value; قبل الاتصال وظيفتنا ، والآن لديه فهم وموضع مع مدخلات لاستخدام selectStart .

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;
            }
        }
    }
}

مقتطفات من علامة تبويب لوحة المفاتيح لإعداد Josh Stodola's في Textbox أو TextArea باستخدام Javascript

دالة عامة ستسمح لك بإدراج علامة الإقحام في أي موضع من مربع النص أو النص الذي ترغب فيه:

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

المعلمة المتوقعة الأولى هي معرف العنصر الذي ترغب في إدخال علامة إقحام لوحة المفاتيح عليه. إذا تعذر العثور على العنصر ، فلن يحدث شيء (من الواضح). المعلمة الثانية هي مؤشر poseton علامة الإقحام. سوف يضع صفر علامة إقحام لوحة المفاتيح في البداية. إذا قمت بتمرير عدد أكبر من عدد الأحرف في قيمة العناصر ، فستضع علامة الإقحام على لوحة المفاتيح في النهاية.

تم اختباره على IE6 وأعلى ، Firefox 2 و Opera 8 و Netscape 9 و SeaMonkey و Safari. للأسف في Safari لا يعمل مع حدث onfocus).

مثال على استخدام الدالة أعلاه لفرض إقحام لوحة المفاتيح للانتقال إلى نهاية كل النصوص في الصفحة عند تلقي التركيز:

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);

هذا واحد يعمل بالنسبة لي:

function getCaretCharOffsetInDiv(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
    else if (typeof document.selection != "undefined" && document.selection.type != "Control")
    {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
} 

يعتمد خط الاتصال على نوع الحدث ، لاستخدام الحدث الرئيسي هذا:

getCaretCharOffsetInDiv(e.target) + ($(window.getSelection().getRangeAt(0).startContainer.parentNode).index());

لحدث الماوس استخدام هذا:

getCaretCharOffsetInDiv(e.target.parentElement) + ($(e.target).index())

في هاتين الحالتين أعتني بخطوط الاستراحة بإضافة الفهرس المستهدف





javascript textbox input