در این مقاله، نحوه انتخاب تمام متن داخل text box را شرح خواهیم داد.

انتخاب کل یک متن در مرورگر Safari

دراین مقاله یک نکته کوچک و در عین حال بسیار پرکاربرد و مفید را شرح می دهیم ، چگونه همه ی متن داخل یک تکس باکس را انتخاب کنید. در اینجا سعی کرده ایم که مشکل و راه حل این نکته را بررسی کنیم. روشی که برای این کار در ادامه شرح می دهیم بر روی دستگاه ها و مرورگرهای متعدد تست شده است.

مشکل

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

راه حل

برای این کار از jQuery استفاده می کنیم.

بنابراین اولین راه حلی که به ذهن می آید این است که رویداد focus را مدیریت کنیم. در کد زیر ما هم همین کار را انجام داده ایم .

$('#txtPassword').on('focus', function () {
    this.select();
});

این  راه حل برای همه ی مرورگرها مناسب نیست و در مرورگر safari جواب نمی دهد.

بنابراین ، راه حل کلی چیست؟

برای این کار، نیاز داریم تا مشخص کنیم جه تعداد کاراکتر از متن را نیاز داریم تا انتخاب کنیم. می توانیم این را با استفاده از property های selectionStart و selectionEnd مشخص کنیم.

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});

حال،نیاز داریم تا از رویداد mouseup جلوگیری کنیم، چرا که به طور خودکار بعد رویداد focus، اجرا می شود و تمام متن از حالت انتخاب خارج می شود.

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});
$("#txtPassword").on('mouseup', function (e) {
    e.preventDefault();
});