Форум АНТИЧАТ - Вставка текста в textarea через клик мышью(JS)

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - Вставка текста в textarea через клик мышью(JS) (https://forum.antichat.xyz/showthread.php?t=38526)

DRON-ANARCHY

21.04.2007 16:30

Вставка текста в textarea через клик мышью(JS)

Переведу сабж...
мне нужно, чтобы я мог по нажатию на смайл получить его код сразу в <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;
}

SMiX	21.04.2007 17:41

При больших объемах текста в текстареа лучше делать

Код:

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

Код HTML:

<script>

function text(msg)

{

document.all.mess.focus();

document.all.mess.value+=msg;

}

function get()

{

document.all.schet.value=document.all.mess.value.length;

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'>&nbsp&nbsp&nbsp&nbspВаш 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')>&nbsp&nbsp&nbsp

<img src =  images/gb_img/2.png onclick=text('s_2')>&nbsp&nbsp&nbsp

<img src =  images/gb_img/3.png onclick=text('s_3')>&nbsp&nbsp&nbsp

<img src = images/gb_img/4.png onclick=text('s_4')>&nbsp&nbsp&nbsp

<img src = images/gb_img/5.png onclick=text('s_5')>&nbsp&nbsp&nbsp

<br><img src = images/gb_img/6.png onclick=text('s_6')>&nbsp&nbsp&nbsp

<img src = images/gb_img/7.png onclick=text('s_7')>&nbsp&nbsp&nbsp

<img src = images/gb_img/8.png onclick=text('s_8')>&nbsp&nbsp&nbsp

<img src = images/gb_img/9.png onclick=text('s_9')>&nbsp&nbsp&nbsp

<img src = images/gb_img/10.png onclick=text('s_10')>&nbsp&nbsp&nbsp

<br><img src = images/gb_img/11.png onclick=text('s_11')>&nbsp&nbsp&nbsp

<img src = images/gb_img/12.png onclick=text('s_12')>&nbsp&nbsp&nbsp

<img src = images/gb_img/13.gif onclick=text('s_13')>&nbsp&nbsp&nbsp

<img src = images/gb_img/14.gif onclick=text('s_14')>&nbsp &nbsp&nbsp

<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

а вот смарите какая у меня штука....

Код HTML:

<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

Цитата:

Сообщение от DRON-ANARCHY

а вот смарите какая у меня штука....

Код HTML:

<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 пихнул картинку?
ну если енто принципиально чтоб тег А был то сделай так

Код HTML:

<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

Цитата:

Сообщение от DRON-ANARCHY

A для курсора)
Ps сделал так. Не втыкивает

хм =\
ну есть 2 вариант

Код HTML:

<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

у меня так:

Код HTML:

<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>

и другие варианты я пробовал.. не катит)
такое ощущение, что ошибка вообще где-то не тут... Но где???

Fr-Ron

22.04.2007 22:38

PHP код:


		
			
<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

я точно скоро сойду с ума...

Код HTML:

<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 тоже не работает. мир - дерьмо. я убью себя

Raz0r

23.04.2007 14:29

А что насчет бб-тегов из разряда [#quote]? Как определить - какой текст (а вернее какая его часть) выделен в textarea?

DRON-ANARCHY

23.04.2007 14:36

Так... давайте сначала с моим вопросом разберемся))
а хотя ладно. .мне не жалко)

Raz0r

23.04.2007 15:10

да, кстати, те скрипты, что оговаривались выше - будут вставлять смайл в конец сообщения, или в текущую позицию в тексте?

Helios

23.04.2007 16:40

По поводу "наркоманского решения" 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 я и предполагать боюсь...

Raz0r

23.04.2007 16:52

т.е. за выделение отвечает фишка Middle ?

Helios

23.04.2007 17:27

Мой вариант:

PHP код:


		
			
<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:

получение того, что выделено:

PHP код:


		
			
<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
РАБОТАЕТ!!! Огромное спасибо!!! Но вот в ФФ не работает, хоть ты ему стреляй!

Helios

24.04.2007 01:18

Цитата:

Сообщение от Linuxoid

Но вот в ФФ не работает, хоть ты ему стреляй!

Проверял в 2.0.0.2 - все работает

DRON-ANARCHY

24.04.2007 13:40

да. в лисе работает отлично... Огромное спасибо.
почему-то не могу добавить тебе еще репы((

кстати, а можно вопрос? Как сделать так, чтобы при втыкивании смалика он не был выделен? а то при нажимании на следующий или при попытке написать сразу же текст, смайл будет заменен..это не удобно...

Helios

24.04.2007 15:38

Закомментируй или удали эти строки:

PHP код:


		
			
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, оставить и переименовать)

bopoh13

26.04.2007 02:49

Helios, из-за чего может быть проблема: при нажатии в похожем скрипте на gif-картинку анимация в EI останавливается (например, в гостевой Sad Raven'а)?!

Helios

26.04.2007 10:58

Кинь ссылку - вечером будет время, посмотрю

bopoh13

26.04.2007 11:18

Цитата:

Сообщение от Helios

Кинь ссылку - вечером будет время, посмотрю

_http://dynamotkd.ru/guest.php :confused:
Причем в ФФ этого не наблюдается.

Время: 15:21