ความต้องการ …
มันสะดวกดีถ้าสามารถ 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 เหมือนรูปข้างล่างนี้
เสร็จแล้วครับ
ขอบคุณมากครับ