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




8 Answers

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

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

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

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

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

এইচটিএমএল:

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

জাতীয়:

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

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




জেসন কোডটি আইফ্রেমের ভিতরে উপাদানগুলির জন্য ব্যবহার করা যাবে না (যেমনটি দশাটি উইন্ডো এবং নথির থেকে পৃথক)। আমি যে সমস্যাটি স্থির করেছি এবং অন্য কোনও jQuery প্লাগইন (চেইনযোগ্য) হিসাবে ব্যবহার করার জন্য আমি এটি সংশোধন করেছি:

উদাহরণ 1: <code> ট্যাগের ভিতরে সমস্ত পাঠ্যের নির্বাচন একক ক্লিকের সাথে এবং "নির্বাচিত" শ্রেণী যোগ করুন:

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

উদাহরণ 2: বোতামে ক্লিক করুন, আইফ্রেমের ভিতরে একটি উপাদান নির্বাচন করুন:

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

দ্রষ্টব্য: মনে রাখবেন যে সুরক্ষা ত্রুটিগুলি রোধে আইফ্রেম উত্স একই ডোমেনে থাকা উচিত।

jQuery প্লাগইন:

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

আমি এটি IE8, ফায়ারফক্স, অপেরা, সাফারি, ক্রোম (বর্তমান সংস্করণ) পরীক্ষিত। আমি পুরনো IE সংস্করণে কাজ করে কিনা তা নিশ্চিত নই (আন্তরিকভাবে আমি যত্ন নিই)।




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

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



আপনি কোন উপাদান বিষয়বস্তু নির্বাচন করতে নিম্নলিখিত ফাংশন ব্যবহার করতে পারেন:

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



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




নির্বাচন বস্তু (গেকো ইঞ্জিন) এবং টেক্সট রেঞ্জের বস্তু (ট্রাইডেন্ট ইঞ্জিন।) -এ নজর রাখুন, আমি এই জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলির সম্পর্কে জানি না যেটি বাস্তবায়িত করার জন্য ক্রস ব্রাউজার সমর্থন আছে, তবে আমি এটির জন্য কখনও তাকাননি , তাই এটা সম্ভব যে এমনকি jQuery আছে।




এখানে স্ট্রিং রূপে পাঠ্যটি নির্বাচন করার আরেকটি সহজ সমাধান, আপনি এই কোডটি ডিভি উপাদানটিকে আপনার কোডে যুক্ত করতে সহজেই ব্যবহার করতে পারেন:

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



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

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

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




Related

javascript jquery