ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

Printable View

سه شنبه 06 خرداد 1393, 01:12 صبح
seyed ehsan

ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

دوستان سلام.
می دونم سوالی که مطرح می کنم برای این مجموعه خیلی پیش پا افتاده است ولی امیدوارم دوستان محبت کنند و راهنمایی کنن .
من میخوام در یک صفحه وب بصورت خیلی ساده و با استفاده از htmlو javascript یک textbox و 3 تا دکمه قرار بدم که هر کدوم از دکمه ها متنی رو که داخل textbox نوشته میشه رو bold , italic, underline کنه .
میشه کمکم کنید ؟ چطوری باید این کار رو انجام داد ؟

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

فرض کنیم تسکت باکسمون رو با آیدی text ساختیم
فرض کنیم برای دکمه بولد کردن با html این کد رو نوشتیم
<button onclick="formatText('b')"><b>B</b></button>
حالا به کمک جاوا اسکریپت این تابع رو میسازیم
function formatText(tag) {

   var Field = document.getElementById('text');

   var val = Field.value;

   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);

   var before_txt = val.substring(0, Field.selectionStart);

   var after_txt = val.substring(Field.selectionEnd, val.length);

   document.getElementById('text').value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;

}
امیدوارم داستان رو گرفته باشی

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

خیلی ممنونم ولی نمیدونم چرا جواب نمیده !
دقیقا کد زیر رو استفاده کردم ولی نمیشه ! میشه راهنمایی کنید که کجای کارم اشتباهه؟

<html>

<head>

<title>Mobile number validation using regex</title>

<script type="text/javascript">

function formatText(tag) {

   var Field = document.getElementById('text');

   var val = Field.value;

   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);

   var before_txt = val.substring(0, Field.selectionStart);

   var after_txt = val.substring(Field.selectionEnd, val.length);

   document.getElementById('text').value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;

}

</script>





</head>

<body>

<input type="text" name="text" id="text" />

<button onclick="formatText('b')"><b>B</b></button>





</body>

</html>

سه شنبه 06 خرداد 1393, 18:53 عصر
Amir_Developer

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline
به این شکل تغییربده
```
<script language="javascript" type="text/javascript">
```
سه شنبه 06 خرداد 1393, 23:33 عصر
seyed ehsan

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

تغییر دادم ولی بی فایده است . جواب نمیده !
نمونه ای نوشته شده وجود داره که امتحان شده باشه ؟
چهارشنبه 07 خرداد 1393, 12:06 عصر
Amir_Developer

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

این کدرو از توی یکی از پروژه هام دقیقا برات کپی کردم ، وقتی میزنی چه اتفاقی میفته ؟
کار میکنه من خودم بارها تست کردم

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

این یه نمونه که تست هم شده



<html dir="rtl">

 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    

    <title>.:: پنل مدیریت ::.</title> 

    </head>





<script language="javascript" type="text/javascript">

function formatText(tag) {

   var Field = document.getElementById('text');

   var val = Field.value;

   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);

   var before_txt = val.substring(0, Field.selectionStart);

   var after_txt = val.substring(Field.selectionEnd, val.length);

   document.getElementById('text').value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;

}





function addpicture()

{









var link=prompt("لطفا آدرس تصویر را وارد نمایید :","");





if (link!=null && link!="")

  {

    document.myform.body.value +="\n <img src=\"pictures/"+link+".jpg\"/> \n";

   }

}





function addbody() {

    if(document.myform.body.value=="")

    alert("لطفا متن پست را وارد کنید.");

    

    if(document.myform.subject.value=="")

    alert("لطفا موضوع پست را وارد کنید.");

    

     }

</script>

















<h4>ویرایش پست</h4>





<button onclick="formatText('b')"><b>B</b></button>

  <button onclick="formatText('i')"><i>i</i></button>

  <button onclick="formatText('u')"><u>u</u></button>

  <table>

<tr><td>اندازه قلم : </td>

<td> <button onclick="formatText('h3')"><h3>الف</h3></button></td>

<td> <button onclick="formatText('h4')"><h4>الف</h4></button></td>

<td> <button onclick="formatText('h6')"><h6>الف</h6></button></td>

</tr>

</table>

<form action="<?php echo $_SERVER['SCRIPT_NAME'];?>" method="post" name="myform">

<table>

<tr>

<td>دسته: </td>

<td>

<select name="cat">





<option value="1">1</option>

</select>

</td>

</tr>

<tr>

<td>موضوع: </td>

<td><input type="text" name="subject" value="دلخواه">

</td>

</tr>

<tr>

<td>متن: </td>

<td><textarea name="body" rows="10" cols="50" id="text">

در این قسمت متن مورد نظر وجود دارد.

</textarea></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="submit" value="به روز رسانی" onclick="addbody();"></td>

</tr>

</table>

</form>

</html>

جمعه 09 خرداد 1393, 02:26 صبح
seyed ehsan

نقل قول: ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline

ممنونم از راهنمایی هایی شما .
من دقیقا کد های شما رو کپی می کنم . مثلا در همین آخرین کدی که ارسال کردید قسمتی وجود داره که متن رو تایپ می کنیم و سه دکمه هم هست برای اینکه نوشته BOLD ITALIC UNDERLINE بشه . زمانی که روی اون دکمه ها کلیک می کنم فقط دو تا تگ به اول و آخر نوشته اضافه می کنه . دقیقا مثل زیر :
متن قبل از کلیک کردن روی دکمه Bold :
sample text
متن بعد از کلیک کردن روی دکمه Bold :
sample text<b></b>
وزمانی هم که دکمه به روز رسانی رو کلیک می کنیم عبارت page not found نمایش داده میشه .
نمی دونم مشکل از کجا میتونه باشه ؟
حالتی وجود نداره که بدون استفاده از دکمه به روز رسانی متن نوشته شده همزمان با تایپ تغیراتش نمایش داده بشه ؟