ساخت یک textbox ساده به همراه 3 آپشن bold , italic, underline
دوستان سلام.
می دونم سوالی که مطرح می کنم برای این مجموعه خیلی پیش پا افتاده است ولی امیدوارم دوستان محبت کنند و راهنمایی کنن .
من میخوام در یک صفحه وب بصورت خیلی ساده و با استفاده از htmlو javascript یک textbox و 3 تا دکمه قرار بدم که هر کدوم از دکمه ها متنی رو که داخل textbox نوشته میشه رو 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;
}
امیدوارم داستان رو گرفته باشی
خیلی ممنونم ولی نمیدونم چرا جواب نمیده !
دقیقا کد زیر رو استفاده کردم ولی نمیشه ! میشه راهنمایی کنید که کجای کارم اشتباهه؟
<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>
به این شکل تغییربده
<script language="javascript" type="text/javascript">
تغییر دادم ولی بی فایده است . جواب نمیده !
نمونه ای نوشته شده وجود داره که امتحان شده باشه ؟
این کدرو از توی یکی از پروژه هام دقیقا برات کپی کردم ، وقتی میزنی چه اتفاقی میفته ؟
کار میکنه من خودم بارها تست کردم
این یه نمونه که تست هم شده
<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>
ممنونم از راهنمایی هایی شما .
من دقیقا کد های شما رو کپی می کنم . مثلا در همین آخرین کدی که ارسال کردید قسمتی وجود داره که متن رو تایپ می کنیم و سه دکمه هم هست برای اینکه نوشته BOLD ITALIC UNDERLINE بشه . زمانی که روی اون دکمه ها کلیک می کنم فقط دو تا تگ به اول و آخر نوشته اضافه می کنه . دقیقا مثل زیر :
متن قبل از کلیک کردن روی دکمه Bold :
sample text
متن بعد از کلیک کردن روی دکمه Bold :
sample text<b></b>
وزمانی هم که دکمه به روز رسانی رو کلیک می کنیم عبارت page not found نمایش داده میشه .
نمی دونم مشکل از کجا میتونه باشه ؟
حالتی وجود نداره که بدون استفاده از دکمه به روز رسانی متن نوشته شده همزمان با تایپ تغیراتش نمایش داده بشه ؟
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول