javascript - jquery w3schools




একটি উপাদান টেক্সট নির্বাচন(আপনার মাউস দিয়ে হাইলাইট হিসাবে) (11)

আমি ব্যবহারকারীদের একটি লিঙ্ক ক্লিক করতে চাই, তারপর এটি অন্য উপাদান (একটি ইনপুট নয়) এ HTML লেখা নির্বাচন করে।

"নির্বাচন করুন" দ্বারা আমি আপনার মাউসকে টেনে এনে পাঠ্য নির্বাচন করব। এটি গবেষণা করার জন্য একটি ভালুক হয়েছে কারন সবাই একে অন্যের ভাষায় "নির্বাচন করুন" বা "হাইলাইট" সম্পর্কে আলোচনা করে।

এটা কি সম্ভব? আমার কোড এতদূর:

এইচটিএমএল:

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

জাতীয়:

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

আমি কি সুস্পষ্টভাবে সুস্পষ্ট কিছু অনুপস্থিত?

https://code.i-harness.com


সাধারণ জাভাস্ক্রিপ্ট

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


আমার বিশেষ ব্যবহার-কেস একটি সম্পাদনযোগ্য স্প্যান উপাদানর মধ্যে একটি পাঠ্য পরিসীমা নির্বাচন করছিল, যেহেতু আমি দেখতে পারি, এখানে কোন উত্তরগুলিতে বর্ণিত নেই।

মূল পার্থক্য হল আপনি Range.setStart () এর ডকুমেন্টেশনে বর্ণিত হিসাবে, Range বস্তুর একটি নোড টাইপ Text পাস করতে হবে:

যদি StartNode টাইপ টেক্সট, মন্তব্য, বা সিডিএটিএসকেশন এর একটি নোড হয় তবে startOffset startNode এর শুরু থেকে অক্ষরের সংখ্যা। অন্য নোডের ধরনগুলির জন্য, startOffset হল StartNode এর শুরুতে শিশু নোডের সংখ্যা।

Text নোডটি স্প্যান উপাদানটির প্রথম সন্তানের নোড, তাই এটি পেতে, স্প্যান উপাদানটির সন্তানের নোড অ্যাক্সেস করুন childNodes[0] । বাকি অন্যান্য উত্তর হিসাবে একই।

এখানে একটি কোড উদাহরণ:

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

অন্যান্য প্রাসঙ্গিক ডকুমেন্টেশন:
Range
Selection
Document.createRange()
Window.getSelection()


আমি একই জিনিসের জন্য অনুসন্ধান করছিলাম, আমার সমাধান এই ছিল:

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

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

PS: - আমি jquery selectors দ্বারা ফেরত বস্তু ব্যবহার করতে সক্ষম ছিল না

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

   //this throws **security exception**

   r.selectNodeContents(w);

এখানে কোন ব্রাউজার স্নিফিং এবং jQuery এ কোন নির্ভরতা নেই এমন একটি সংস্করণ রয়েছে:

function selectElementText(el, win) {
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

ক্রোম জন্য "অন্য যদি" ​​যোগ jQuery.browser.webkit । এই ক্রোম 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 );
        }
    } );
} );

ক্রোমে কাজ করে এমন একটি আপডেট হওয়া সংস্করণ:

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/


টিম এর পদ্ধতি আমার ক্ষেত্রে পুরোপুরি কাজ করে - আমি নিম্নলিখিত বিবৃতি প্রতিস্থাপিত করার পরে IE এবং FF উভয়ের জন্য একটি ডিভিতে পাঠ্য নির্বাচন করে:

range.moveToElementText(text);

নিম্নলিখিত সঙ্গে:

range.moveToElementText(el);

ডিভিটিতে লেখাটি নিম্নোক্ত jQuery ফাংশন দিয়ে এটি ক্লিক করে নির্বাচিত হয়:

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

যেকোনো ট্যাগের জন্য এই ছোট এবং সহজ কোডের মাধ্যমে যে ট্যাগের ভিতরে সমস্ত লেখা নির্বাচন করতে পারেন। এটি পুরো ট্যাগ এলাকাকে হলুদ রং দিয়ে উজ্জ্বল করবে এবং একক ক্লিকে এটির মধ্যে পাঠ্য নির্বাচন করবে।

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

select() jQuery এর ডকুমেন্টেশন অনুযায়ী select() :

প্রতিটি মিলিত উপাদান নির্বাচন ইভেন্ট ট্রিগার। এটি এমন সমস্ত ক্রিয়াকলাপকে কারণ করে যা নির্বাচিত ইভেন্টটিতে আবদ্ধ করা হয়েছে এবং মিলযুক্ত উপাদানগুলিতে ব্রাউজারের ডিফল্ট নির্বাচন পদক্ষেপকে কল করে।

আপনার ব্যাখ্যা আছে কেন jQuery select() এই ক্ষেত্রে কাজ করবে না।







jquery