javascript - مكتبة - تحديد النص في عنصر(مثل التمييز باستخدام الماوس)




تحميل مكتبة jquery (11)

أرغب في جعل المستخدمين ينقرون على رابط ، ثم يحدد نص HTML في عنصر آخر ( وليس إدخالًا).

عن طريق "select" أعني بنفس الطريقة التي تختار بها النص عن طريق سحب الماوس فوقه. لقد كان هذا تحديًا للأبحاث لأن الجميع يتحدث عن "اختيار" أو "تمييز" بعبارات أخرى.

هل هذا ممكن؟ رمزي حتى الآن:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) {
    $("#" + element).select();
}

هل أنا في عداد المفقودين شيء واضح بشكل صارخ؟


سهل جافاسكريبت

function selectText(node) {
    node = document.getElementById(node)

    if (document.body.createTextRange) {
        const range = document.body.createTextRange()
        range.moveToElementText(node)
        range.select()
    } else if (window.getSelection) {
        const selection = window.getSelection()
        const range = document.createRange()
        range.selectNodeContents(node)
        selection.removeAllRanges()
        selection.addRange(range)
    } else {
        console.warn("Could not select text in node: Unsupported browser.")
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));
<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

هنا هو عرض العمل . لأولئك الذين يبحثون عن المساعد jQuery ، جعلت واحدة من هؤلاء أيضا .

jQuery (الإجابة الأصلية)

لقد وجدت حلا لهذا في هذا الموضوع . تمكنت من تعديل المعلومات المقدمة ومزجها بقليل من jQuery لإنشاء وظيفة رائعة تمامًا لتحديد النص في أي عنصر ، بغض النظر عن المتصفح:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

lepe - هذا رائع بالنسبة لي. أضع شفرتك في ملف مكون إضافي ، ثم استخدمتها مع كل عبارة حتى تتمكن من الحصول على عدة علامات مسبقة ومرات متعددة "تحديد الكل" في صفحة واحدة وتختار ما قبل التحديد الصحيح:

<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
        $(".selectText").each(function(indx) {
                $(this).click(function() {                 
                    $('pre').eq(indx).selText().addClass("selected");
                        return false;               
                    });
        });
  });


إصدار محدّث يعمل على chrome:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

http://jsfiddle.net/KcX6A/326/


إلقاء نظرة على كائن التحديد (محرك جيكو) والكائن TextRange (محرك ترايدنت.) لا أعرف عن أي أطر عمل جافا سكريبت التي لديها دعم عبر المتصفح لهذا التنفيذ ، لكني لم أبحث عنها أبدا ، لذلك من الممكن حتى أن jQuery لها.


تعمل طريقة تيم بشكل مثالي لحالتي - اختيار النص في div لكل من IE و FF بعد أن استبدل العبارة التالية:

range.moveToElementText(text);

كالآتي:

range.moveToElementText(el);

يتم تحديد النص الموجود في div بالنقر فوقه باستخدام وظيفة jQuery التالية:

$(function () {
    $("#divFoo").click(function () {
        selectElementText(document.getElementById("divFoo"));
    })
});

تمت إضافة jQuery.browser.webkit إلى "آخر إذا" لمتصفح Chrome. تعذر الحصول على هذا العمل في Chrome 23.

قدم هذا البرنامج النصي أدناه لاختيار المحتوى في علامة <pre> التي تحتوي على class="code" .

jQuery( document ).ready(function() {
    jQuery('pre.code').attr('title', 'Click to select all');
    jQuery( '#divFoo' ).click( function() {
        var refNode = jQuery( this )[0];
        if ( jQuery.browser.msie ) {
            var range = document.body.createTextRange();
            range.moveToElementText( refNode );
            range.select();
        } else if ( jQuery.browser.mozilla || jQuery.browser.opera  || jQuery.browser.webkit ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            console.log(selection);
            var range = refNode.ownerDocument.createRange();
            range.selectNodeContents( refNode );
            selection.removeAllRanges();
            selection.addRange( range );
        } else if ( jQuery.browser.safari ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            selection.setBaseAndExtent( refNode, 0, refNode, 1 );
        }
    } );
} );

كنت أبحث عن نفس الشيء ، وكان الحل هو:

$('#el-id').focus().select();

لأي علامة يمكن للمرء تحديد كل النص داخل هذه العلامة من خلال هذا الرمز القصير والبسيط. وسوف تبرز منطقة العلامة بأكملها باللون الأصفر وتحديد النص داخلها بنقرة واحدة.

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

هذا thread يحتوي على أشياء رائعة حقا. ولكنني غير قادر على القيام بذلك على هذه الصفحة باستخدام FF 3.5b99 + FireBug بسبب "خطأ أمني".

Yipee !! تمكّنت من تحديد شريط جانبي لليمين بالكامل مع هذا الرمز نأمل أن يساعدك في:

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

ملاحظة: - لم أتمكن من استخدام الكائنات التي تم إرجاعها بواسطة محددات jquery مثل

   var w=$("div.welove",$("div.sidebar"));

   //this throws **security exception**

   r.selectNodeContents(w);

هنا هو حل آخر بسيط للحصول على النص المحدد في شكل سلسلة ، يمكنك استخدام هذه السلسلة بسهولة لإلحاق عنصر div في شفرتك:

var text = '';

if (window.getSelection) {
    text = window.getSelection();

} else if (document.getSelection) {
    text = document.getSelection();

} else if (document.selection) {
    text = document.selection.createRange().text;
}

text = text.toString();

يمكنك استخدام الوظيفة التالية لتحديد محتوى أي عنصر:

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

يمكن استدعاء هذه الوظيفة على النحو التالي:

$('#selectme').selectText();






jquery