تغییر خودکار direction عنصر input بر اساس زبان وارد شده

یکی از نکات مهم در طراحی رابط کاربری عنصر ورودی فرم ها (Input) راست/چپ چین بودن ورودی است. متاسفانه هنوز هم دیده می شود طراحان وب از Direction های ثابت در فرم ها استفاده میکنند. یعنی اگر زبان سایت فارسی است ورودی ها را راست چین می کنند. در این صورت در ورودی هایی نظیر ایمیل، آدرس وب سایت و یا کلمه عبور ورودی راست چین است درحالیکه کاراکتر وارد شده انگلیسی است و باید از چپ به راست وارد و خوانده شود. یک سری دیگر از طراحان هم با اضافه کردن یک کلاس برخی از ورودی های انگلیسی را چپ چین می کنند که کار طراح را در اضافه کردن این کلاس به ورودی های دلخواه زیاد می کند.

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

enfar

برای استفاده از این قابلیت مفید و کاربرپسند از کدهای زیر را به فایل اسکریپت سایت خود اضافه کنید:

// Change Input Direction Depend on Language
$('input').keyup(function(){
setDirection($(this));
})
function checkRTL(s){
var ltrChars = 'A-Za-zu00C0-u00D6u00D8-u00F6u00F8-u02B8u0300-u0590u0800-u1FFF'+'u2C00-uFB1CuFDFE-uFE6FuFEFD-uFFFF',
rtlChars = 'u0591-u07FFuFB1D-uFDFDuFE70-uFEFC',
rtlDirCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');

return rtlDirCheck.test(s);
};
function setDirection(selector){
var string = selector.val();
for (var i=0; i<string.length; i++) {
var isRTL = checkRTL( string[i] );
var dir = isRTL ? 'RTL' : 'LTR';
if(dir === 'RTL') var finalDirection = 'RTL';
if(finalDirection == 'RTL') dir = 'RTL';
}
///////////////////////////////////////////////////
if(dir=='LTR'){
selector.css("direction", "ltr");
}else{
selector.css("direction", "rtl");
}
}

دوست خوبم سیامک مختاری هم یک کد در codepen نوشته است که همین کار قابلیت را بکمک جی کوئری یا کتابخانه Zepto به فرم ها می افزاید:


بعد از اینکه سیامک کد بالا رو نوشت سالار کابلی عزیز هم کد زیر رو به روش های بالا اضافه کرد که می تونید از این روش هم استفاده کنید:

JS Bin

8 نظر تغییر خودکار direction عنصر input بر اساس زبان وارد شده

  1. علیرضا معظمی

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

    پاسخ
  2. نوید

    با سلام و تشکر از شما
    فکر می کنم بوسیله کد زیر کار ساده تر انجام بشه:

    function irRTL(text) {
    return /[\u0600-\u06FF]+/.test(text);
    }

    پاسخ
  3. irani

    سلام
    خب اگه الان بخوایم متن داخل سایت هم بصورت خودکار تغییر کنه چیکار باید کرد؟
    مثلا الان دارم فارسی مینویسم! راست چینه! ولی خط پایین که انگلیسی نوشته شده هم دوباره راست چینه!
    Test
    اگه بخوایم مثلا تو دیدگاه ها اگه یه خط انگلیسی بود چپ چین باشه باید چیکار کرد؟
    ممنون

    پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *