Просмотр полной версии : Вставка текста в textarea через клик мышью(JS)
DRON-ANARCHY
21.04.2007, 16:30
Переведу сабж...
мне нужно, чтобы я мог по нажатию на смайл получить его код сразу в <textarea>
Я в яваскрипте только по XSS ориентируюсь...на такое меня не хватает. Помогите кто чем могёт)
с меня +5
blackybr
21.04.2007, 17:37
var smile_code;
function emoticon(smile_code)
{
txt = document.getElementById('text');
txt.value = txt.value + smile_code;
}
При больших объемах текста в текстареа лучше делать
var smile_code;
function emoticon(smile_code)
{
txt = document.getElementById('text');
txt.value += smile_code;
}
DRON-ANARCHY
21.04.2007, 17:41
а можно с каментами, пожалуйста?
я ж еще и разобраться хочу)
blackybr
21.04.2007, 17:56
Ф-ия принимает 1 параметр - smile_code.
document.getElementById('text'); возвращает обьект , в данном случае тот куда мы будем добавлять значение (value) .. у кадого обьекта айди уникален
Если такого элемента нет то возвращается Null
дальше в txt.value += smile_code; мы тупо добавляем к полю в котором уже есть что-то - код смайлика
так как код смайлика не такой уж и большой обычно то я бы все же заюзал
txt.value = txt.value + smile_code;
DRON-ANARCHY
21.04.2007, 18:04
>>document.getElementById('text');
то есть тут я должен указать название своей <textarea>?
>>в txt.value
а тут не text.value должно быть?
blackybr
21.04.2007, 18:16
Ладн.. более простой пример
<script type="text/javascript">
function someshit()
{
var ururu=document.getElementById("xekxek")
alert(ururu.innerHTML)
}
</script>
</head>
<body>
<h1 id="xekxek" onclick="someshit()">Это хенко</h1>
т.е. у <h1>Это хенко</h1> есть айди xekxek, мы его заносим в перемеенную ururu.. и теперь при клике на наш "Это хенко" у нас вылезает алерт с тем что в <h1></h1> (innerHTML) .. нуесли убрать innerHTML то вылезет полностью все , но в принципе не важно
главное задай каждому смайлику какойто айдишник..
DRON-ANARCHY
21.04.2007, 18:25
ок. спасибо... попробую разобраться)
DRON-ANARCHY
21.04.2007, 22:07
хнык... я уже стал ненавидеть потихоньку JavaScrpt...
может кто-нить замутить конкретный пример под мой вопрос?
вот смарите... если на античате нажать на картинку(вверху от поля воода сообщения), то в самом поле ввода появятся, ну например, теги цитаты. А мне надо чтобы при абсолютно таком же нажатии на смайлик в поле ввода появлялось ну например :lol:
Pridu_ROCK
21.04.2007, 22:54
когда то давным давно писал простейшую гостевую книгу вот держи исходники html
<script>
function text(msg)
{
document.all.mess.focus();
document.all.mess.value+=msg;
}
function get()
{
document.all.schet.value=document.all.mess.value.l ength;
setTimeout('get()',10);
}
</script>
<form action = 'gb_w.php' name=write method=POST>
<table border=0 cellSpacing=1 cellPadding=1 bgColor=#000000>
<tr><td bgcolor = 'white'>Ваше имя: <input type = text maxlength = 10 size=10 name='name'>    Ваш e-mail:
<input type = text name = 'e_mail' maxlength = 40 size=20>
<td bgcolor = 'white'>Номер ICQ: <input type = text maxlength = 7 size=7 name='icq'>
<tr><td bgcolor = 'white'><textarea cols=45 rows=10 name=mess onFocus='get()'></textarea>
<td bgcolor = 'white' valign=top>
<img src = images/gb_img/1.png onclick=text('s_1')>   
<img src = images/gb_img/2.png onclick=text('s_2')>   
<img src = images/gb_img/3.png onclick=text('s_3')>   
<img src = images/gb_img/4.png onclick=text('s_4')>   
<img src = images/gb_img/5.png onclick=text('s_5')>   
<br><img src = images/gb_img/6.png onclick=text('s_6')>   
<img src = images/gb_img/7.png onclick=text('s_7')>   
<img src = images/gb_img/8.png onclick=text('s_8')>   
<img src = images/gb_img/9.png onclick=text('s_9')>   
<img src = images/gb_img/10.png onclick=text('s_10')>   
<br><img src = images/gb_img/11.png onclick=text('s_11')>   
<img src = images/gb_img/12.png onclick=text('s_12')>   
<img src = images/gb_img/13.gif onclick=text('s_13')>   
<img src = images/gb_img/14.gif onclick=text('s_14')>    
<tr><td align=center bgcolor = 'white'>
<input type=submit name=go value='Отправит' >
<td bgcolor = 'white' valign=bottom>MAX символов 250: <input type=text name=schet value=0 size=1></td></tr>
</table> </form><br>
DRON-ANARCHY
22.04.2007, 00:49
а вот смарите какая у меня штука....
<a style="cursor: pointer;" href="#" onclick="text(':)'); return false;"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle"></a>
<a style="cursor: pointer;" href="#" onclick="text(';)'); return false;"><img src="images/smiles/smile2.gif" alt="Подмигнуть" border="0" align="absmiddle" ></a>
<textarea> имеет в себе onFocus='get()'
но смайлы не втыкиваются
Pridu_ROCK
22.04.2007, 01:02
а вот смарите какая у меня штука....
<a style="cursor: pointer;" href="#" onclick="text(':)'); return false;"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle"></a>
<a style="cursor: pointer;" href="#" onclick="text(';)'); return false;"><img src="images/smiles/smile2.gif" alt="Подмигнуть" border="0" align="absmiddle" ></a>
<textarea> имеет в себе onFocus='get()'
но смайлы не втыкиваются
focus сделан только лишь для удобства чтобы юзверь тыкнул на смайл и ему не пришлось тыкать еще и на поле гиде он пишет.
А нафига ты в тег A пихнул картинку?
ну если енто принципиально чтоб тег А был то сделай так
<a style="cursor: pointer;" href="#"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle" onclick="text(':)'); return false;"></a>
DRON-ANARCHY
22.04.2007, 01:10
A для курсора)
Ps сделал так. Не втыкивает
Pridu_ROCK
22.04.2007, 01:24
A для курсора)
Ps сделал так. Не втыкивает
хм =\
ну есть 2 вариант
<a style="cursor: pointer;" href="javascript:onclick=text('s_9')"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle"></a>
Pridu_ROCK
22.04.2007, 01:26
и еще проверь что у тебя точно поле в которое вставляется смайл называется как у меня в скрипте (у меня mess)
blackybr
22.04.2007, 11:18
<a href="#" onclick="smilie(':)'); return false;"><img src="images/smilies/smile.gif" alt="Smile" border="0" /></a>
как тут в булке..
DRON-ANARCHY
22.04.2007, 14:01
у меня так:
<textarea name=mess rows=7 COLS=54 onFocus='get()'></textarea>
<script>
function text(msg)
{
document.all.mess.focus();
document.all.mess.value+=msg;
}
function get()
{
document.all.schet.value=document.all.mess.value.l ength;
setTimeout('get()',10);
}
</script>
<table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap>
<a style="cursor: pointer;" href="#" onclick="text(':)'); return false;"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle" /></a>
<a style="cursor: pointer;" href="#" onclick="text(';)'); return false;"><img src="images/smiles/smile2.gif" alt="Подмигнуть" border="0" align="absmiddle" /></a>
и другие варианты я пробовал.. не катит)
такое ощущение, что ошибка вообще где-то не тут... Но где???
<form name=form>
<textarea name=mess rows=7 COLS=54></textarea>
</form>
<script language="JavaScript">
function Smilies(Smilie)
{
form.mess.value+=" "+Smilie+" ";
form.Form.mess.focus();
}
</script>
</head>
<body>
<a style="cursor: pointer;" href=javascript:Smilies(':wtf:')><img src=smile/wtf.gif border=0></a>
Проверял на Opera и IE, все ок. А что вобще пишешь то? Если небольшое что - то, могу попробовать покопаться в скриптах.
Linuxoid
23.04.2007, 00:27
Для решения подобной задачи достаточно посмотреть исходник загруженной страницы любого форума... ;)
Но вот как это по разному реализовать - почитал. Интересно. Сам сейчас этим занимаюсь... ;)
DRON-ANARCHY
23.04.2007, 02:15
я точно скоро сойду с ума...
<tr><td align=left class=p valign=top><font color=white>*Сообщение (Не более 1000 символов):</font><br><textarea name=mess rows=7 COLS=54></textarea></td></tr>
<tr><td class=p colspan=2><input class=p type=submit value=Отправить name=add> * – поля обязательные для заполнения.</td></tr>
<script language="JavaScript">
function Smilies(Smilie)
{
form.mess.value+=" "+Smilie+" ";
form.Form.mess.focus();
}
</script>
<table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap>
<a style="cursor: pointer;" href="javascript:Smilies(':)'); return false;"><img src="images/smiles/smile1.gif" alt="Улыбка" border="0" align="absmiddle" /></a>
<a style="cursor: pointer;" href="javascript:Smilies(';)'); return false;"><img src="images/smiles/smile2.gif" alt="Подмигнуть" border="0" align="absmiddle" /></a>
не работает.
IE пишет что есть ошибки на странице и аргументирует тем, что return находится вне ф-ции. Если его убрать, смайлик ваще пропадает из поля выбора смайла
Linuxoid
23.04.2007, 04:41
Так... Такая проблема... :)
Попробывал пример товарища Fr-Ron'a заюзать. Если код в <head></head> - то работает. Если в <body></body> - То не в какую! Что делать?
Вот приведите привер, как реализовать, чтобы текст вставлялся в форму:
<textarea type="text" rows=4 cols=40 name="text"></textarea>
Которая находится внутри тега <body>. Буду очень благодарен. ;)
blackybr
23.04.2007, 06:43
function smilie(thesmilie)
{
getActiveText();
var AddSmilie = " " + thesmilie + " ";
AddText(AddSmilie);
}
function AddText(NewCode)
{
if (typeof(theform.message.createTextRange) != "undefined" && theform.message.caretPos)
{
var caretPos = theform.message.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? NewCode + ' ' : NewCode;
caretPos.select();
}
else if (theform.message.selectionStart || theform.message.selectionStart == '0')
{ // its mozilla and we'll need to re-write entire text
var start_selection = theform.message.selectionStart;
var end_selection = theform.message.selectionEnd;
// fetch everything from start of text area to selection start
var start = (theform.message.value).substring(0, start_selection);
// fetch everything from start of selection to end of selection
var middle = NewCode;
// fetch everything from end of selection to end of text area
var end = (theform.message.value).substring(end_selection, theform.message.textLength);
theform.message.value = start + middle + end;
setfocus();
theform.message.selectionStart = end_selection + middle.length;
theform.message.selectionEnd = start_selection + middle.length;
getActiveText();
AddTxt = "";
return;
}
else
{
theform.message.value += NewCode;
}
setfocus();
getActiveText();
AddTxt = "";
}
<a href="#" onclick="smilie(';)'); return false;"><img src="images/smilies/smilehz.gif" alt="Wink" border="0" /></a>
и тд
наркоманское решение .. но все же =)
DRON-ANARCHY
23.04.2007, 12:15
и так тоже не работает)
и в HEAD тоже не работает. мир - дерьмо. я убью себя
А что насчет бб-тегов из разряда [#quote]? Как определить - какой текст (а вернее какая его часть) выделен в textarea?
DRON-ANARCHY
23.04.2007, 14:36
Так... давайте сначала с моим вопросом разберемся))
а хотя ладно. .мне не жалко)
да, кстати, те скрипты, что оговаривались выше - будут вставлять смайл в конец сообщения, или в текущую позицию в тексте?
По поводу "наркоманского решения" br:
Чет не вьехал в твоем коде вот в это:
theform.message.selectionStart = end_selection + middle.length;
theform.message.selectionEnd = start_selection + middle.length;
С такой реализацией начало выделения у тебя уползает от первоначального на middle.length символов вправо, что не есть гуд.
Имхо нужно заменить на
theform.message.selectionStart = start_selection;
theform.message.selectionEnd = start_selection + middle.length;
Тогда выделенный текст будет заменяться на код смайла, и этот самый код будет выделяться.
Еще на понятно, какими судьбами тут оказались:
setfocus();
getActiveText();
AddTxt = "";
Если действие setfocus() понятно по названию /привел бы код=)/, то что делает getActiveText() я вообще не вкурил, т.к. она не принимает никаких параметров, и , судя по всему, ничего не возвращает.
А что такое AddTxt я и предполагать боюсь...
т.е. за выделение отвечает фишка Middle ?
Мой вариант:
<script>
function insertSmilie(code) {
var myTextArea = document.getElementById('message');
//IE support
if (document.selection) {
myTextArea.focus();
sel = document.selection.createRange();
sel.text = code;
}
//MOZILLA/NETSCAPE support
else if (myTextArea.selectionStart || myTextArea.selectionStart == "0") {
var startPos = myTextArea.selectionStart;
var endPos = myTextArea.selectionEnd;
var oldText = myTextArea.value;
myTextArea.value = oldText.substring(0, startPos) + code + oldText.substring(endPos, oldText.length);
myTextArea.selectionStart = startPos;
myTextArea.selectionEnd = startPos + code.length;
} else {
myTextArea.value += code;
}
myTextArea.focus();
}
</script>
<textarea id="message" rows="7" cols="50">bla bla bla bla bla</textarea>
<a href="#" onclick="insertSmilie(':one:');">One</a>
2 Raz0r:
получение того, что выделено:
<script>
function getSelected()
{
var myTextArea = document.getElementById('message');
//IE support
if (document.selection) {
myTextArea.focus();
sel = document.selection.createRange();
return sel.text;
}
//MOZILLA/NETSCAPE support
else if (myTextArea.selectionStart || myTextArea.selectionStart == "0") {
var startPos = myTextArea.selectionStart;
var endPos = myTextArea.selectionEnd;
var oldText = myTextArea.value;
return oldText.substring(startPos, endPos);
} else {
return '';
}
}
</script>
blackybr
23.04.2007, 20:31
Зато работает..
я вам не все ф-ии кинул просто..
априбавим к тому.. и все отлично работает
var AddTxt = "";
function getActiveText()
{
setfocus();
if (!is_ie || (is_ie && !document.selection))
{
return false;
}
var sel = document.selection;
var rng = sel.createRange();
if (rng != null && (sel.type == "Text" || sel.type == "None"))
{
text = rng.text;
}
if (rng != null && theform.message.createTextRange)
{
theform.message.caretPos = rng.duplicate();
}
return true;
}
function setfocus()
{
theform.message.focus();
}
Linuxoid
24.04.2007, 00:09
Helios
РАБОТАЕТ!!! Огромное спасибо!!! Но вот в ФФ не работает, хоть ты ему стреляй!
Но вот в ФФ не работает, хоть ты ему стреляй!
Проверял в 2.0.0.2 - все работает
DRON-ANARCHY
24.04.2007, 13:40
да. в лисе работает отлично... Огромное спасибо.
почему-то не могу добавить тебе еще репы((
кстати, а можно вопрос? Как сделать так, чтобы при втыкивании смалика он не был выделен? а то при нажимании на следующий или при попытке написать сразу же текст, смайл будет заменен..это не удобно...
Закомментируй или удали эти строки:
myTextArea.selectionStart = startPos;
myTextArea.selectionEnd = startPos + code.length;
Linuxoid
24.04.2007, 17:48
Пример реализации можно смотреть в моем скрипте пейджера ( http://dss.moy.su/ ). Там я это дело реализовал на основе прочтения данной темы. Так что всем большой спасибо.
З.Ы. Смохнул пыль с купленной год назад книги "Самоучитель JavaScript". :) Буду читать! Ибо сейчас без явы серьезный сайт не написать.
DRON-ANARCHY
24.04.2007, 21:21
Всем большое спасибо. Работает отлично.
Тему мона закрыть... Или, ввиду большого кол-ва вопросов по JavaScript, оставить и переименовать)
Helios, из-за чего может быть проблема: при нажатии в похожем скрипте на gif-картинку анимация в EI останавливается (например, в гостевой Sad Raven'а)?!
Кинь ссылку - вечером будет время, посмотрю
Кинь ссылку - вечером будет время, посмотрю_http://dynamotkd.ru/guest.php :confused:
Причем в ФФ этого не наблюдается.
vBulletin® v3.8.14, Copyright ©2000-2026, vBulletin Solutions, Inc. Перевод: zCarot