کار با عناصر Textarea

Work with Textarea Elements

تا این قسمت از کار با دستور v-model آشنا شده ایم و همین همچنین در رابطه با نحوه ی کار با فیلدهای ساده مانند ایمیل نیز صحبت کرده‌ایم. نکته جالبی که باقی مانده است رفتار پیش فرض دستور v-model است. دستور v-model به صورت پیش فرض تمایل دارد تا با هر بار فشرده شدن کلید های کیبورد مقدار خصوصیات data را نیز به روز رسانی کند. مسئله اینجاست که شاید ما نخواهیم چنین اتفاقی بیفتد، شاید مد نظر شما باشد که تغییرات پس از خروج از یک فیلد مشخص اعمال شوند. به طور مثال زمانی که ایمیل خود را در فیلد email تایپ کرده ایم و سپس روی فیلد password کلیک می کنیم (خروج از یک فیلد)، آن زمان باشد که مقدار تایپ شده در فیلد ایمیل، در خصوصیت email در data نیز ثبت شود. برای چنین کاری یک modifier وجود دارد:

<div class="form-group">
  <label for="password">Password</label>
  <input
    type="password"
    id="password"
    class="form-control"
    v-model.lazy="userData.password"
  />
</div>

با اضافه کردن lazy به دستور v-model می گوییم با هربار فشرده شدن کلیدهای کیبورد خصوصیات ما را به روز رسانی نکند بلکه منتظر شود تا کاربر از فیلد مورد نظر خارج شود. اینکه از lazy استفاده کنید یا نکنید بستگی به خودتان و شرایط برنامه شما دارد. به طور مثال اگر برنامه شما می خواهد با هر بار فشردن کلید های کیبورد به کاربر فیدبک بدهد (به طور مثال به کاربر بگوید که ایمیل وارد شده معتبر نیست یا رمز وارد شده کوتاه است یا با تایپ کردن کاربر عملیات اعتبارسنجی را نیز انجام بدهید) می توانید از lazy استفاده نکنید اما اگر می خواهید عملیات اعتبارسنجی یا هر عملیات دیگر مد نظر شما در انتها و تنها در زمان ثبت فرم اعمال شود حتماً از lazy استفاده کنید.

modifier های دیگری نیز وجود دارند که برای کار با دستور v-model استفاده می‌شوند. به طور مثال modifier دیگری به نام trim وجود دارد که کار آن حذف اسپیس های اضافی در ابتدا یا انتهای رشته وارد شده توسط کاربر است. در برخی از اوقات کاربر به اشتباه در ابتدای مقدار وارد شده اسپیس می گذارد که در چنین حالتی می توان با استفاده از trim اسپیس های اضافه را حذف کرد. همچنین modifier دیگری به نام number وجود دارد. number مسئول تبدیل کردن ورودی های کاربر به عدد می باشد. همان طور که می دانید در برنامه های عادی جاوااسکریپتی هر مقدار وارد شده توسط کاربر در یک فرم به صورت رشته ای برای شما ارسال می شود، حتی اگر عدد باشد اما number به شما کمک می کند که این محدودیت را دور زده و فیلدهای دارای این modifier را به صورت خودکار به عدد تبدیل کنید. نکته ی جالب تر اینجاست که شما می توانید این modifier ها را به هم بچسبانید:

<div class="form-group">
  <label for="password">Password</label>
  <input
    type="password"
    id="password"
    class="form-control"
    v-model.lazy.number="userData.password"
  />
</div>

حالا به قسمت بعدی میرسیم. فیلد بعدی ما یک textarea است و مانند بقیه فیلدها با استفاده از یک v-model کار می کند:

<textarea id="message" rows="5" class="form-control" v-model="message"></textarea>

حالا خصوصیت message را درون data نیز تعریف می کنیم:

<script>
export default {
  data() {
    return {
      userData: {
        email: "",
        password: "",
        age: 27
      },
      message: "A new text"
    };
  }
};
</script>

این خصوصیت نیز به صورت پیش فرض مقدار Textarea را پر می کند. نکته بسیار مهم در مورد textarea ها این است که شما نمی توانید با آن ها مانند فیلدهای دیگر برخورد کنید. به طور مثال شاید بتوان برای تعیین مقدار پیش فرض برای فیلدهای دیگر مقداری را درون تگ های آغازین و پایانی آن فیلد قرار دهید اما در مورد textarea حتماً برای تعیین مقدار پیش فرض باید از v-model استفاده کنید. بنابراین حواستان باشد که قرار دادن متن بین تگ های آغازین و پایانی textarea مقدار پیش فرض آن را تعیین نخواهد کرد. در نهایت مقدار message را در پنل بادی نیز نمایش می دهیم:

<div class="panel-body">
  <p>Mail: {{ userData.email }}</p>
  <p>Password: {{ userData.password }}</p>
  <p>Age: {{ userData.age }}</p>
  <p>Message: {{ message }}</p>
  <p>
    <strong>Send Mail?</strong>
  </p>
  <ul>
    <li></li>
  </ul>
  <p>Gender:</p>
  <p>Priority:</p>
  <p>Switched:</p>
</div>

نکته جالب دیگر در مورد ذخیره line break می‌باشد. همانطور که می دانید ما می توانیم در textarea ها از کاراکتر line break استفاده کنیم یعنی کلید اینتر را فشار داده و به خط بعد برویم. اگر در حال حاضر این کار را با برنامه ی خودمان انجام بدهیم، در قسمت panel-body شاهد شکسته شدن خط نخواهیم بود؛ یعنی کاراکتر line break را مشاهده نمی کنیم. ممکن است تصور کنید که کاراکتر line break حذف شده است اما اصلاً این چنین نیست. زبان HTML به صورت پیش فرض line break را نمایش نمی دهد مگر اینکه با استفاده از یک دستور CSS به HTML بگویید که line break ها را نیز نمایش بدهد. من این کار را در کد زیر انجام می دهم تا متوجه منظور من بشوید:

<p style="white-space: pre">Message: {{ message }}</p>

White-space مشخص می کند که نحوه ی رفتار HTML با فضای خالی (whitespace) چطور باشد. گزینه ی pre یعنی به حالت preview یا همان حالتی که در کد ها قابل مشاهده است. حالا اگر درون Textarea خود یک مقدار مشخص را در چند خط بنویسید، می توانید آن را به صورت چند خطی درون قسمت panel-body مشاهده کنید. بنابراین می توانید به راحتی داده های درون آن را به یک سرور بفرستید و تمام line break ها نیز به سرور شما ارسال می شوند.

در قسمت بعد به سراغ checkbox ها و موارد پیشرفته تر مانند ذخیره ی داده ها در آرایه ها می رویم.