Loading…

جزیره طراحی و توسعه وب

امتیازات این مطلب
هیچ کاربری وجود ندارد
سوال: تبدیل Textarea به IDE
سلام دوستان وقت بخیر
برای پروژه کامپایلر میخوام گرافیکش رو با html و css پیاده سازی کنم.به این صورت که یک textarea قرار دادم که درونش کد نوشته میشه و حالا textarea دیگری که صرفاً مطالبش خواندنیه و نتیجه کار در آن قرار میگیرد.اما بحث سر قسمتیه که میخوام کدم رو توش تایپ کنم.میخوام یه ویژگی داشته باشه که مثل IDE ها که با گذاشتن یک پرانتز به صورت اتوماتیک پرانتز بسته میشه و نشانه وسط آن قرار میگیره تا کدها نوشته بشه و یا با گذاشتن اولین " ، خود IDE برای بستن اون " را قرار میده.
اما متاسفانه نمیدونم این که چطور باید این کار رو انجام بدم و پیاده سازیش به چه زبانی و به چه صورتی است.لطفا راهنماییم بفرمایید
ممنون

سلام ITPRO عزیز، کد زیر این کار رو برای شما انجام میده:

(function(){
    function insertInto(str, input){
        var val = input.value, s = input.selectionStart, e = input.selectionEnd;
        input.value = val.slice(0,e)+str+val.slice(e);
        if (e==s) input.selectionStart += str.length - 1;
        input.selectionEnd = e + str.length -1;
    }
    var closures = {40:')',91:']', 123:'}'};
    $(".editable").keypress(function(e) {
        if (c = closures[e.which]) insertInto(c, this);
    });
})();

علامت هایی که پشتیبانی شدن داخل متغیر closures تعریف شدن.

این پست توسط هیچ کس به عنوان جواب انتخاب شده است


بزرگترین جهل انسان تظاهر به دانستن است!

ITPRO باشید و فرهنگ ITPRO را به دیگران نیز معرفی کنید
  • ارسال شده توسط:
  • زمان ارسال: 2 ماه قبل
سلام وقت بخیر
الان میتونم بپرسم که چطور باید از این کد استفاده کنم و نحوه ارتباط دهی اون با Textarea را چطور باید انجام داد.

این پست توسط هیچ کس به عنوان جواب انتخاب شده است


زندگی، درك همين اكنون است/ زندگی، شوق رسيدن به همان فردايی ست، كه نخواهد آمد/ تو، نه در ديروزي، و نه در فردايی/ ظرف امروز، پر از بودن توست/ شايد اين خنده كه امروز، دريغش كردي/ آخرين فرصت همراهی با اميد است...

ITPRO باشید و فرهنگ ITPRO را به دیگران نیز معرفی کنید
کد بالا با textarea هایی که کلاس editable داشته باشن کار میکنه، حالا شما می تونید selector کد رو جوری تغییر بدید که با textarea مورد نظر شما کار کنه، کافیه تو کد بالا editable رو با کلاس یا id مورد نظرتون عوض کنید.

این پست توسط هیچ کس به عنوان جواب انتخاب شده است


بزرگترین جهل انسان تظاهر به دانستن است!

ITPRO باشید و فرهنگ ITPRO را به دیگران نیز معرفی کنید
برای ارسال پست وارد شوید.