جعبه متن یا تکست باکس Text box

تکست باکس Text box یا جعبه متن چیست؟

تکست باکس (Text box یا Textbox) یا جعبه متن یکی از انواع ویجت های رابط کاربری گرافیکی است که معمولا برای وارد کردن متن مورد استفاده قرار می‌گیرد. این ویجت با نام فیلد متنی (Text field) نیز شناخته می‌شود.

از تکست باکس ها معمولا زمانی استفاده می‌شود که لازم است کاربر مقداری کوتاه یا بلند (از یک کاراکتر یا واژه گرفته تا چندین پاراگراف) را در قالب یک متن وارد کند. توجه داشته باشید در صورتی که بتوان از المان‌های اختصاصی‌تر برای دریافت مقادیر از سوی کاربر استفاده کرد این المان‌ها به تکست باکس ترجیح داده می‌شوند.

به عنوان مثال برای انتخاب یک گزینه از میان چند مقدار از پیش تعیین شده استفاده از دکمه رادیویی در مقایسه با تکست باکس رویکردی صحیح‌تر و منطقی‌تر خواهد بود. این موضوع علاوه بر محدود کردن کاربر به مقادیر مشخص شده به شکلی مناسب به کاهش زمان لازم برای وارد کردن داده ها نیز کمک می‌کند.

مشخصات ظاهری و ویژگی‌های تکست باکس ها

تکست باکس ها معمولا دارای ظاهری مستطیل شکل هستند. این نوع المان ها بسته به محتوایی که قرار است در آن‌ها وارد شود از لحاظ ابعاد یا میزان گنجایش در دو نوع تک خطی (Single-Line) و چندخطی (Multi-line) مشاهده می‌شوند.

به عنوان مثال برای وارد کردن متون کوتاهی مانند نام یا عنوان پیام از جعبه‌های متنی تک خطی و برای وارد کردن متون طولانی‌تر مانند متن پیام در یک فرم تماس از جعبه‌های متنی چندخطی استفاده می‌شود.

در نوع تک خطی، تکست باکس دارای ارتفاعی کوتاه‌تر برای وارد کردن متن در یک خط خواهد بود. اما در نوع چند خطی معمولا تکست باکس دارای ارتفاعی بلندتر بوده و متن وارد شده در آن می‌تواند در قالب چند خط نمایش داده شود. گفتنی است در نوع دوم ممکن است اسکرول بار (Scrollbar) های افقی و عمودی نیز در داخل تکست باکس مشاهده شود. این اسکرول بارها امکان حرکت میان متن طولانی وارد شده در تکست باکس را برای کاربر فراهم می‌کنند.

معمولا زمانی که یک تکست باکس آماده دریافت ورودی متنی از سوی کاربر است یک کرسر متنی داخل آن نمایش داده می‌شود. این کرسر که اغلب به صورت یک خط کوتاه عمودی و چشمک‌زن نمایان می‌شود محل فعلی وارد کردن کاراکترها یا ویرایش متن را مشخص می‌کند. در چنین حالتی اصطلاحا تکست باکس موردنظر دارای فوکس یا فعال می‌باشد.

نحوه تعامل با تکست باکس

به منظور وارد کردن (یا تایپ) متون با استفاده از صفحه کلید لازم است ابتدا تکست باکس در حالت آماده برای دریافت ورودی (دارای فوکس) قرار گیرد. روش‌های متداول برای انجام این کار عبارتست از:

• کلیک کردن روی تکست باکس موردنظر یا لیبل منتسب به آن با کمک ماوس یا لمس کردن آن در صفحه نمایش های لمسی
• استفاده از کلیدهای Tab یا Shift+Tab برای انتقال فوکس از المان‌های قبلی یا بعدی به تکست باکس
• فشردن کلید میانبر منتسب به تکست باکس

زمانی که فیلد متنی موردنظر در حالت آماده برای دریافت ورودی قرار می‌گیرد با فشردن کلیدهای روی صفحه کلید، حروف یا نمادهای متناظر با کلیدها در محل قرارگیری کرسر متنی یکی پس از دیگری درج می‌شوند.

تغییر محل کرسر متنی

برای تایپ و ویرایش متن موجود در تکست باکس یا حذف بخشی از آن لازم است ابتدا کرسر متنی به محل موردنظر منتقل شود.

تغییر محل کرسر متنی با کمک ماوس یا لمس کردن

در صورتی که تکست باکس حاوی متن باشد کاربر می‌تواند با کلیک یا لمس کردن محل موردنظر خود روی متن، کرسر را به آن محل انتقال دهد. ممکن است پیش از انجام این کار تکست باکس دارای فوکس بوده باشد که در این حالت کرسر از محل پیشین به محل جدید منتقل خواهد شد.

تغییر محل کرسر متنی با کمک صفحه کلید

اگر تکست باکس دارای فوکس باشد کرسر متنی در داخل آن نمایش داده می‌شود. در این حالت با استفاده از کلیدهای کرسر نیز امکان تغییر محل کرسر متنی با کمک صفحه کلید وجود دارد. به عنوان مثال کاربر می‌تواند با کمک کلیدهای پیکانی راست و چپ، کرسر را به محل کاراکتر سمت راست یا چپ مکان فعلی خود منتقل کند یا با کمک کلیدهای بالا و پایین (در تکست باکس های چند خطی)، کرسر را به خط بالا یا پایین جابجا کند. کلیدهای Home و End نیز برای انتقال کرسر به ابتدا و انتهای خط مورد استفاده قرار می‌گیرند.

ترکیب کلید Ctrl با کلیدهای راست و چپ باعث انتقال کرسر به ابتدای واژه سمت راست یا سمت چپ می‌شود. این کلید در ترکیب با کلیدهای بالا و پایین نیز برای انتقال کرسر به پاراگراف قبلی یا بعدی به کار می‌رود. همچنین فشردن همزمان کلید Ctrl همراه با کلیدهای Home و End برای انتقال به ابتدا یا انتهای متن موجود در تکست باکس استفاده می‌شود.

انتخاب متن

برای انجام اعمالی نظیر کپی (Copy) و کات (Cut)، ویرایش و جایگزینی متن پیشین هنگام وارد کردن متن جدید و حذف تمام یا بخشی از متن لازم است ابتدا متن موردنظر انتخاب شود. معمولا این بخش انتخاب شده با رنگ زمینه متفاوتی از مابقی متن موجود در Text box متمایز می‌شود.

انتخاب متن با کمک ماوس یا صفحه نمایش های لمسی

برای انتخاب بخشی از متن موجود در یک Text box می‌توانید نشانگر ماوس را به ابتدا یا انتهای بخش موردنظر منتقل کنید. سپس کلید اصلی (معمولا کلید سمت چپ) ماوس را فشار داده و پایین نگه دارید. در این حالت همزمان با جابجا کردن نشانگر ماوس در جهت مناسب، بخشی از متن با شروع از محل ابتدایی کرسر به حالت انتخاب شده در می‌آید. پس از انتخاب کامل بخش موردنظر کافیست کلید ماوس را رها کنید تا عملیات انتخاب متن به پایان رسد.

دابل کلیک کردن روی یک واژه نیز معمولا باعث انتخاب آن واژه و تریپل کلیک کردن باعث انتخاب کل پاراگراف فعلی خواهد شد.

برای انتخاب متن در صفحه نمایش های لمسی نیز کافیست روی یک واژه را چند ثانیه لمس کنید (فشار طولانی) تا به حالت انتخاب شده درآید. سپس با کمک گیره‌های دو طرف واژه، بخش انتخابی را گسترش دهید.

انتخاب متن با کمک صفحه کلید

برای انتخاب بخشی از متن با کمک صفحه کلید کافیست کرسر متنی را به ابتدا یا انتهای متن موردنظر منتقل کنید. سپس کلید Shift را پایین نگه دارید و همراه با آن کرسر متنی را در جهت مناسب جابجا کنید. به این ترتیب بخشی از متن که مابین محل ابتدایی کرسر متنی و مکان فعلی آن قرار گرفته است به حالت انتخاب شده در می‌آید.

به عنوان مثال برای انتخاب یک جمله کافیست ابتدا کرسر متنی را در نقطه شروع جمله قرار دهید سپس کلید Shift را پایین نگه داشته و با کمک ماوس روی نقطه آخر جمله کلیک کنید. توجه داشته باشید می‌توانید به جای استفاده از ماوس در بخش آخر از کلیدهای بیان شده برای تغییر محل کرسر نیز کمک بگیرید. برای مثال پس از پایین نگه داشتن کلید Shift با فشردن کلید پیکانی سمت راست، کرسر یک کاراکتر به سمت راست منتقل می‌شود و کاراکتر موجود انتخاب می‌شود.

برای انتخاب کامل محتویات یک جعبه متن نیز می‌توانید از میانبر صفحه کلید Ctrl+A (و Control+A در صفحه کلیدهای اپل) استفاده کنید.

حذف تمام یا بخشی از متن

برای حذف کاراکتر پیش از کرسر متنی و کاراکتر پس از آن در یک تکست باکس می‌توانید به ترتیب از کلیدهای Backspace و Delete استفاده کنید. فشردن همزمان کلید Ctrl همراه با این دو کلید نیز به ترتیب باعث حذف کلمه قبلی و بعدی خواهد شد.

علاوه بر این شما می‌توانید ابتدا بخشی از متن یا تمام آن را با کمک ماوس یا صفحه کلید انتخاب نموده و سپس با فشردن کلید Backspace یا Delete بخش انتخاب شده را حذف کنید.

منوی زمینه

راست کلیک کردن روی جعبه های متنی معمولا باعث نمایش یک منوی زمینه خواهد شد. این منو شامل دستورات رایج متنی مانند رونوشت برداری یا کپی (Copy)، بریدن یا کات (Cut) و الصاق (Paste)، آندو (Undo) و انتخاب تمام متن (Select All) می‌باشد.

سایر نکات مرتبط با ویرایش متن

توجه داشته باشید در صورتی که بخشی از متن موجود در تکست باکس انتخاب شده باشد وارد کردن متن یا تایپ داخل تکست باکس باعث می‌شود متن انتخاب شده حذف و با کاراکتر یا متن جدید جایگزین شود.

تکست باکس ها در HTML

در HTML برای ایجاد یک تکست باکس تک خطی از المان <input> با نوع text (به صورت <input type=”text”>) و برای ایجاد جعبه های متنی چند خطی از تگ <textarea> مشابه با مثال زیر استفاده می‌شود:

<form action="/action_page.php">
  <label for="petname">Pet name: </label>
  <input type="text" id="petname" name="petname"><br>
  <label for="review">Describe your pet's habits:</label><br>
  <textarea id="review" name="review" rows="4" cols="40">
     This is a simple textarea element. Leave your long text here.
  </textarea>
  <br><br>
  <input type="submit" value="Submit">
</form>

در تصویر زیر می‌توانید نتیجه قطعه کد بالا را مشاهده کنید. همانطور که می‌بینید جعبه متنی اول یک نمونه تک خطی است و توسط کاربر با مقدار Bella پر شده است. اما جعبه دوم که یک تکست باکس چند خطی است با متن پیشفرض خود رها شده است.

لیبل های تکست باکس ها در HTML

در مثال فوق برای مشخص کردن برچسب یا عنوان متناظر با تکست باکس ها از تگ <label> استفاده شده است. برای انتساب لیبل به یک تکست باکس، مقدار خصوصیت for در این المان ها مساوی با مقدار خصوصیت id اختصاص داده شده برای تگ <input> یا <textarea> متناظر خواهد بود. کاربر با کلیک روی خود جعبه متنی یا برچسب اختصاص داده شده به آن می‌تواند آن را در حالت آماده برای دریافت ورودی قرار دهد.

البته در صورتی که تگ <input> یا <textarea> در داخل تگ <label> قرار داده شود بدون استفاده از ویژگی های id و for هم المان <label> به المانی که دربرگرفته است تخصیص داده می‌شود. (با اینحال پیشنهاد می‌شود در این حالت هم مشابه با نمونه زیر از ویژگی id و for استفاده شود).

<label for="petname">
  Pet name:
  <input type="text" id="petname" name="petname">
</label>

ویژگی name

پس از سابمیت کردن فرم، نام فیلد و مقدار وارد شده در فیلد متنی به شکل name=value برای سرور ارسال می‌شود. به عنوان نمونه در مورد مثال بالا اگر جعبه متنی اول (تگ <input>) با مقدار Bella پر شده باشد پس از سابمیت کردن، نتیجه به صورت petname=Bella توسط سرور دریافت خواهد شد.