كيف يمكنك نقل المؤشر إلى الموضع الأخير لمنطقة النص في Javascript؟

Question

لدي منطقة نصية وزر في النموذج.قد تحتوي منطقة النص بالفعل على بعض النص فيها.أرغب في أن ينتقل المؤشر إلى الموضع الأخير في منطقة النص عند النقر فوق الزر.

هل هذا ممكن؟

Answer 1

هل تقصد بـ "الموضع الأخير" نهاية النص؟

سيؤدي تغيير ".القيمة" لحقل النموذج إلى نقل المؤشر إلى النهاية في كل متصفح باستثناء IE.مع IE، عليك أن تتسخ يديك وتتلاعب بالاختيار عن عمد، باستخدام واجهات غير قياسية:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

أو هل تقصد إعادة المؤشر إلى المكان الذي كان عليه سابقًا، آخر مرة تم فيها التركيز على منطقة النص؟

في كل متصفح باستثناء IE، سيحدث هذا بالفعل بمجرد استدعاء "element.focus()"؛يتذكر المتصفح آخر موضع للمؤشر/التحديد لكل إدخال ويعيد التركيز عليه.

سيكون هذا أمرًا صعبًا للغاية لإعادة إنتاجه في IE.سيتعين عليك إجراء استطلاع طوال الوقت للتحقق من مكان وجود المؤشر/التحديد، وتذكر هذا الموضع إذا كان في عنصر إدخال، ثم قم بإحضار موضع عنصر معين عند الضغط على الزر واستعادته.يتضمن هذا بعض التلاعب الممل جدًا بـ "document.selection.createRange()".

لست على علم بأي شيء في jQuery من شأنه أن يساعدك على القيام بذلك، ولكن ربما يكون هناك مكون إضافي في مكان ما؟

Answer 2

والجواب xgMz كان أفضل بالنسبة لي. كنت لا داعي للقلق حول المستعرض:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

وهنا يمثل امتدادا مسج سريع كتبت أن تفعل هذا بالنسبة لي في المرة القادمة:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

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

$("#MyTextArea").focusToEnd();

Answer 3

ويمكنك أيضا القيام بذلك:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

وهذا الرمز يعمل لكلا input وtextarea. اختبار مع أحدث المتصفحات: فايرفوكس 23، IE 11 و 28 كروم

وjsFiddle المتاحة هنا: http://jsfiddle.net/cG9gN/1/

المصدر: https://stackoverflow.com/a/12654402/114029

Answer 4

هل يمكن استخدام هذا https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

وهذا هو ما يمكنني استخدام لتيكستارياس داخل بلدي عند _ النقر أو غيرها من المناسبات، ويبدو أن تعمل بشكل جيد لفايرفوكس وإنترنت إكسبلورر 7 و 8. ومواقف المؤشر في نهاية النص بدلا من الجبهة.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

Answer 6

لتعيين التركيز الماوس وتحرك المؤشر إلى نهاية الإدخال. عملها في كل متصفح، على منطق بسيط فقط هنا.

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);

Answer 7

وI تعديلmkaj تمديد قليلا لدعم القيمة الافتراضية

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");