ASP.NET กับ jQuery: ทำ Highligh ข้อความใน TextBox และ copy ทั้งหมดใน click เดียว

ความต้องการ …

มันสะดวกดีถ้าสามารถ copy ข้อความทั้งหมดจาก TextBox แบบ multiline ได้ในปุ่มเดียว

เตรียมตัวให้พร้อม …

1. ที projects สร้าง web form ใหม่ให้ชื่อว่า Copyalltext.aspx

2. ที่ form วาง multiline TextBox และ hyperlink control ตาม code ข้างล่าง

    <form id="form1" runat="server">
    <div align="center">
        <fieldset style="width: 400px; height: 300px;">
            <p>
                กรุณากรอกข้อแนะนำของคุณที่นี่:</p>
            <asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="5" Width="300" Height="200"
                runat="server">
            </asp:TextBox>
            <br />
            <asp:HyperLink ID="lnkHighlight" Text="คริกที่นี่เพื่อคัดลอก!" runat="server">
            </asp:HyperLink>
        </fieldset>
    </div>
    </form>

3. ลอง run form นี้ดูหน้าตามันจะออกมาคล้ายๆแบบนี้

4. เพิ่ม CSS style สำหรับ highlight ข้อความโดยใช้ ::selection นี่คือ CSS3 selector ลงไป

    <style media="screen" type="text/css">
        ::selection
        {
            background:#0000FF;
        }
    </style>

5. เพิ่มรูปแบบ CSS ต่อไปนี้สำหรับ hyperlink

    <style media="screen" type="text/css">
        a
        {
            cursor:hand;
            color:#0000FF;
        }
    </style>

6. ไป download jQuery clipboard plugin จาก http://plugins.jquery.com/project/clipboard

7. รวมคลิปบอร์ดปลั๊กอินใน page พร้อมกับ library jQuery

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.clipboard.js" type="text/javascript"></script>

วิธีการทำ …

1. ใน function document.ready() ใช้ function clipboardReady() ของ plugin

$.clipboardReady(function() {

2. trigger คัดลอกไปที่คลิปบอร์ด ในเหตุการณ์การกระทำให้คลิกที่ hyperlink

$(“a”).click(function() {

3. highlight ข้อความใน TextBox

$(‘#<%=TextBox1.ClientID%>’).select();

4. คัดลอกเนื้อหาของ TextBox ลงในคลิปบอร์ด ใช้คลิปบอร์ดปลั๊กอิน

$.clipboard($(‘#<%=TextBox1.ClientID%>’).val());
});
});

jQuery ที่สมบูรณ์แล้ว

<script type="text/javascript">
    $(document).ready(function () {
        $.clipboardReady(function () {
            $("a").click(function () {
                $('#<%=TextBox1.ClientID%>').select();

                $.clipboard($('#<%=TextBox1.ClientID%>').val());
            });
        });
    });
</script>

ทดสอบการทำงาน …

run web page ขึ้นมา กรอกข้อมูลหลายๆบรรทัดลงไป และคริกที่ hyperlink ข้อความใน TextBox จะถูก hyperlink เหมือนรูปข้างล่างนี้

เสร็จแล้วครับ

ขอบคุณมากครับ

#:P

Code & Run.