نظرًا لأن المستخدم يطلب الارتباط بكائن Textrange ، فإن كائنًا يستخدم لمعالجة جزء النص من كائن JavaScript.
Textrange هو كائن يستخدم للتعبير عن الأحرف الصينية في عناصر HTML. على الرغم من أننا لا نستخدم هذا الكائن كثيرًا ، إلا أنه يتم توفيره في IE4.0. ومع ذلك ، فإن أساليب الاتصال التي توفرها Textrange غامضة نسبيًا ، فماذا يمكننا أن نفعل به؟
يتمثل الاستخدام التقليدي لـ TexTrange في تشغيل محتوى النص الذي يحدده المستخدمون مع ماوس على صفحة الويب ، مثل التغييرات ، والحذف ، والإضافات الجديدة ، وما إلى ذلك ، ولكن غرضه الكلاسيكي هو العثور على نص (هذا بسيط نسبيًا) في صفحة ويب والحصول على موضع مؤشر مربع الإدخال. يمكن لهذا الأخير إنشاء العديد من الاستخدامات المفيدة ، مثل: الحد من MaskTextBox ، النقطة الفنية الأساسية الخاصة به هي الحصول على موضع المؤشر في مربع الإدخال ثم استخدام تعبيرات منتظمة للحكم على محتوى الإدخال. هناك أيضًا "استخدام مفاتيح الأسهم للتنقل بشكل طبيعي في مصفوفة مربع الإدخال" التي سأقدمها لاحقًا. النقطة الفنية الأساسية هي أيضًا الحصول على موضع المؤشر في مربع الإدخال.
الكود بأكمله للحصول على موضع المؤشر في مربع الإدخال قصير جدًا في الواقع ، لكن هذه الكائنات والأساليب ليست شائعة الاستخدام بشكل شائع.
رمز JS
<span style = "font-size: medium ؛"> <script language = "javaScript"> function getCursorpsn (txb) {var slct = document.selection ؛ var rng = slct.createRange () ؛ txb.select () ؛ rng.setEndPoint ("startTostart" ، slct.createRange ()) ؛ var psn = rng.text.length ؛ rng.collapse (false) ؛ rng.select () ؛ إرجاع PSN ؛ } </script> </span>سنتحدث هنا عن الآثار الجانبية التي ستجلب إلى تشغيل مربع الإدخال بعد استخدام طريقة getCursorpsn ().
لمربع الإدخال
رمز HTML
<span style = "font-size: medium ؛"> <input type = "text" onKeyDown = "GetCursorpsn (this)"> </span>
لن يكون قادرًا على استخدام مفاتيح السهم اليسرى واليمين لتحديد النص ؛
رمز HTML
<span style = "font-size: medium ؛"> <textarea onkeydown = "getCursorpsn (this)"> </dextarea> </span>
، لم يعد بإمكانك استخدام مفاتيح DISTER+ UP ، لأسفل ، وأسفل ، اليسار واليمين لتحديد النص. لأنه بعد الحصول على الكود يحصل على نقطة بداية المؤشر الحالي إلى النص ، استدعاء rng.collapse (خطأ) ؛ سوف يغير نقطة تحرير النص في سلة النص.
1. قصاصات التعليمات البرمجية لتلبية متطلبات المستخدم ، واستخدم المفاتيح العلوية والسفلية واليسارية واليمنى لتحقيق قفزة مربع النص ، وحدد محتوى مربع النص لتسهيل تعديل المستخدم. الرمز كما يلي:
رمز JS
<span style = "font-size: medium ؛"> var range = $ currenttextfield.createtextrange () ؛ // $ currenttextfield هو نطاق كائن jQuery.movestart ('الحرف' ، 0) ؛ Range.Select () ؛ </span>فيما يلي مقالة مستوردة حول Textrange أشعر أنني بحالة جيدة:
رمز HTML
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> وثيقة جديدة </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <style> body {font-size: 12px ؛ } #show {background-color: #ccff99 ؛ } </style> </head> <body> <textarea id = "content" cols = "30" rows = "10"> تموت الأسماك في النهر بشكل غريب ، ويعاني السكان في اتجاه مجرى النهر من الأمراض الغريبة ، والنباتات على طول الساحل تتحول باستمرار. هل هم المبيدات المتبقية؟ أو هجوم كيميائي حيوي؟ يرجى الانتباه إلى CCTV -10 "استكشاف علمي" الليلة ، البرنامج الخاص القادم: "The Mysterious Foot Gashing Man by the River - Tear Chinese Men Team" </textarea> <button id = "btn"> احصل على القيمة المحددة </button> <div id = "show"> </div> "") ؛ } /* هناك بعض المشكلات تحت الطريقة واحدة ff* / function getSelectText () {try {// ie: document.selection.createRange () w3c: window.getSelection () var selecttext = (document.selection document.selection.createRange (). النص: window.getSelection (). toString () ؛ if (selecttext! = null && selecttext.trim ()! = "") {return selectText ؛ }} catch (err) {}} /* method 2* / function getSelectText2 (id) {var t = document.getElementById (id) ؛ if (window.getSelection) {if (t.selectionStart! = undefined && t.selectionEnd! = undefined) {return t.value.substring (t.selectionStart ، t.selectionEnd) ؛ } آخر {return "" ؛ }} آخر {return document.selection.createRange (). text ؛ }} document.getElementById ('btn'). onClick = function () {document.getElementById ('show'). innerhtml = getSelectText2 ('content') ؛ } </script> </body> </html>