تغییر استایل متن هایلایت شده

[میلاد قاضی پور]

سلام . من میخوام وقتی قسمتی از متنی رو که در textArea نوشتم رو انتخاب میکنم با کلیک روی یه اینپوت باتون استایلش رو عوض کنم .
این کد رو نوشتم :



function toRtl()
{
document.selection.createRange().text+=
'<span style="direction:rtl;">'+document.selection.createRange().text+'<span/>';
}

اما کار نمیکنه . کسی میدونه چطور میشه همچین کاری کرد ؟

[mehdi.mousavi]

سلام.
گمان نمی کنم بتونید بخشی از یک نوشته در درون textarea رو right-align کرده و بخش دیگه ای از اون رو left-align کنید. اما می تونیم textarea ای شبیه آنچه در Google+ انجام شده ایجاد کنیم، بدین شکل که با وارد شدن اولین کاراکتر، تشخیص بدیم متن فارسی است یا انگلیسی و سپس textarea رو بر اساس متن وارد شده rtl یا ltr کنیم. برای اینکار، میشه بدین شکل عمل کرد:

$(function(){
$('#txt').keyup(function() {
var self = $(this), val = self.val();
if(val && val.length >= 1) {
var isPersian = /[\u0600-\u06FF\uFE00-\uFE0F\uFF00-\uFFEF]/.test(val[0]);
self.css('direction', isPersian ? 'rtl' : 'ltr');
}
});
});

با فرض اینکه html امون این باشه:

<textarea id="txt"></textarea>

بدین ترتیب اگر اولین کاراکتر زده شده فارسی باشه، textarea از سمت راست متن رو adjust میکنه...

موفق باشید.

[میلاد قاضی پور]

ببینید در واقع من نمیخوام که چنانچه گفتید بخشی رو rtl و بخش دیگر رو ltr کنم . من میخوام فقط یک تگ اسپن با چنین خواصی در innerhtml اون درج کنه تا موقعی که مطلب رو منتشر میکنم در صفحه ی مربوطه به اون صورت نمایش داده بشه . مثل همین تگهای "[code]" داخل ادیتور سایت برنامه نویس.

[mehdi.mousavi]

ببینید در واقع من نمیخوام که چنانچه گفتید بخشی رو rtl و بخش دیگر رو ltr کنم . من میخوام فقط یک تگ اسپن با چنین خواصی در innerhtml اون درج کنه تا موقعی که مطلب رو منتشر میکنم در صفحه ی مربوطه به اون صورت نمایش داده بشه . مثل همین تگهای "[code]" داخل ادیتور سایت برنامه نویس.

سلام.
من از روی کدی که نوشته بودید فکر کردم هدف RTL یا LTR کردن اون TextArea هستش... اما الان با توضیحی که دادید متوجه موضوع شدم. برای اینکار، ابتدا این تابع رو به برنامه اضافه می کنیم:


jQuery.fn.extend({
insertTag: function (beginTag, endTag) {
return this.each(function (i) {
var sel;
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = beginTag + sel.text + endTag;
}
else if (this.selectionStart || this.selectionStart == '0') {
this.focus();
var startPos = this.selectionStart, endPos = this.selectionEnd;
sel = this.value.substring(startPos, endPos);
this.value = this.value.substring(0, startPos) + (beginTag + sel + endTag) + this.value.substring(endPos, this.value.length);
}
})
}
});


دقت کنید، کدی که شما نوشته اید و در اون از createRange استفاده کرده بودید، فقط با IE سازگار بود. در صورتیکه در Browser های دیگه باید از selectionStart و selectionEnd استفاده کرد. پس از افزودن کد فوق به برنامه (که در حقیقت یه jQuery Plugin ساده هستش) می تونید Ready Handler امون رو بدین شکل تغییر بدیم:

$(function () {
$('button').click(function () {
var txt = $('#txt');
txt.insertTag('', '');
});
});


با فرض اینکه HTML امون این باشه:

<textarea id="txt"></textarea>
<button type="button">Click Me</button>


الان می تونید text ای رو در textarea انتخاب کنید، سپس button مزبور رو فشار بدید. وقتی این اتفاق بیفته، در سمت چپ بخش انتخاب شده و در انتهای سمت راست بخش انتخاب شده Insert میشه. البته من چون فرصت ندارم آزمایش نکردم ببینم که اگه Scrollbar داشته باشه، textarea مزبور چطور عمل میکنه.... بنابراین حواستون به این مساله باشه.

موفق باشید.

[Mostafa_Dindar]

سلام ،

جناب موسوی میشه در مورد اون Regular Expression کاراکتر های فارسی و بازه اونها یعنی
uFE00-\uFE0F و
uFF00-\uFFEF کمی توضیح بدید ؟

متشکرم

[mehdi.mousavi]

سلام ، جناب موسوی میشه در مورد اون Regular Expression کاراکتر های فارسی و بازه اونها یعنی
uFE00-\uFE0F و
uFF00-\uFFEF کمی توضیح بدید ؟ متشکرم

سلام.
کد حروف فارسی و عربی، بر اساس Unicode 4.0 در سه بازه فوق الذکر قرار میگیرن. در .NET Framework، میتونیم این بازه ها رو بر اساس Named Class هاشون (که بهش Named Block هم میگن) آدرس کنیم. به بیان دیگه، میتونیم بدین شکل عمل کنیم:

Regex regex = new Regex("\\p{IsArabic}|\\p{IsArabicPresentationForms-A}|\\p{IsArabicPresentationForms-B}", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant | RegexOptions.IgnorePatternWhitespace | RegexOptions.Compiled);

من هم اول کد فوق رو بر اساس Named Class ها نوشتم، اما دیدم در JavaScript کار نکرد، بنابراین، بازه عددی اونها رو در Regular Expression مربوطه نوشتم. برای مشاهده لیست این کلاس ها، می تونید به supported named blocks در این آدرس (http://msdn.microsoft.com/en-us/library/20bw873z.aspx) رجوع کنید (تقریبا اواخر صفحه).

موفق باشید.