Форум

sones · #1 (**permalink**) 15.05.2015, 11:48

Добрый день, есть скрипт, который по нажатию буттона подгружает в textarea пару тегов либо оборачивает ими уже введенный текст. При текущей реализации вставить можно любую пару типа:
, <a></a> и т.д.
Я не особо разбираюсь в js и хотел бы спросить, каким образом можно релизовать в рамках данного кода вставку тега в таком виде, например:
<a href=""></a> или ?

function addedidor(tag)
{
        var obj = document.getElementById('content');
        if(document.selection) obj.value += "<" + tag + "></" + tag + ">";
        else if(typeof(obj.selectionStart) == "number")
        {
                var start = obj.selectionStart;
                var end = obj.selectionEnd;
                var value = obj.value;
                obj.select();
                if(start != end)
                {
                        obj.value = value.substr(0,start) + "<" + tag + ">" + value.substr(start,end - start) + "</" + tag + ">" + value.substr(end);
                        obj.setSelectionRange(start,end + tag.length * 2 + 5);
                }
                else
                {
                        obj.value = value.substr(0,start) + "<" + tag + "></" + tag + ">" + value.substr(start);
                        obj.setSelectionRange(start + tag.length + 2,start + tag.length + 2);
                }
        }
}

<p align="right">
<input type="button" value="<b>" onClick="addedidor('b');" >&nbsp;
<input type="button" value="<i>" onClick="addedidor('i');" >&nbsp;
<input type="button" value="<u>" onClick="addedidor('u');" >&nbsp;
<input type="button" value="<h2>" onClick="addedidor('h2');" >&nbsp;
<input type="button" value="<h3>" onClick="addedidor('h3');" >&nbsp;
<input type="button" value="абзац" onClick="addedidor('p');" >&nbsp;
<input type="button" value="ссылка" onClick="addedidor('a');" >&nbsp;
</p>
<textarea id="content"></textarea>

ksa · #2 (**permalink**) 15.05.2015, 11:59

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

каким образом можно релизовать в рамках данного кода вставку тега в таком виде, например:
<a href=""></a> или ?

Как вариант, в той функции анализировать, какой именно тег хотят, и делать соответствующие "добавки" в формирование "начала" этого тега...

kostyanet · #3 (**permalink**) 15.05.2015, 19:21

В текущей - никак. Там один tag на оба конца. Надо заводить еще переменную для начала отдельно, тогда в нее можно будет напихать что хочешь. Но тогда надо будет следить чтоб в конце совпадало.

Поэтому нахер такие методы. Есть обычная замена, нафиг тут какие-то мероприятия проводить, когда все идет по событию.

kostyanet · #4 (**permalink**) 15.05.2015, 19:25

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

value="<h2>"

А, вот что за. Редактор с кнопочками типа.

Со ссылками тут вообще облом. Они из двух частей состоят, из гипер и текста. Или придется текст просто повторять из ссылки.

рони · #5 (**permalink**) 15.05.2015, 19:52

sones,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <script>
    function addedidor(tag, tagEnd)
{
        tagEnd = tagEnd || tag.replace(/\s.*/,'');
        var obj = document.getElementById('content');
        if(document.selection) obj.value += "<" + tag + "></" + tagEnd + ">";
        else if(typeof(obj.selectionStart) == "number")
        {
                var start = obj.selectionStart;
                var end = obj.selectionEnd;
                var value = obj.value;
                obj.select();
                if(start != end)
                {
                        obj.value = value.substr(0,start) + "<" + tag + ">" + value.substr(start,end - start) + "</" + tagEnd + ">" + value.substr(end);
                        obj.setSelectionRange(start,end + tag.length + tagEnd.length + 5);
                }
                else
                {
                        obj.value = value.substr(0,start) + "<" + tag + "></" + tagEnd + ">" + value.substr(start);
                        obj.setSelectionRange(start + tag.length + 2,start + tag.length + 2);
                }
        }
}

 </script>
 <p align="right">
<input type="button" value='<font color="red"></font>' onClick='addedidor("font color=\"red\"");' >&nbsp;
<input type="button" value='<font color=""></font>' onClick='addedidor("font color=\"\"");' >&nbsp;
<input type="button" value='<a href=""></a>' onClick='addedidor("a href=\"\"");' >&nbsp;
<input type="button" value="<b>" onClick="addedidor('b');" >&nbsp;
<input type="button" value="<i>" onClick="addedidor('i');" >&nbsp;
<input type="button" value="<u>" onClick="addedidor('u');" >&nbsp;
<input type="button" value="<h2>" onClick="addedidor('h2');" >&nbsp;
<input type="button" value="<h3>" onClick="addedidor('h3');" >&nbsp;
<input type="button" value="абзац" onClick="addedidor('p');" >&nbsp;
<input type="button" value="ссылка" onClick="addedidor('a');" >&nbsp;
</p>
<textarea id="content"></textarea>

</body>

</html>

sones · #6 (**permalink**) 17.05.2015, 12:40

рони,
Спасибо большое, то, что нужно, единственное не могу понять, как корректно задать в скобках значение (например для цвета - ""):
<input type="button" value='' onClick='addedidor("font color=\"\"");' >

рони · #7 (**permalink**) 17.05.2015, 15:55

sones,
смотрите пример выше строка 38 и ещё исправлена строка 31.

vlad0s0111 · #8 (**permalink**) 17.05.2015, 16:39

Доброго времени суток! Решил обратится к вам за помощью так как у меня ничего не выходит. Мне нужно что бы в окошко при вводе кода(ключа) который будет мною задан, будет переходить на яндекс диск.
Вот примерный скрин.

http://imgur.com/WwmNqBX

У меня же получилось так, то при вводе любого символа или даже ничего не вводя, все равно переходит на другую ссылку(яндекс диск)

Вот мой html код:

<div align='center'><form action='Ссылка на яндекс диск'  method='get'> <input type='text' name='zbt' value='' style="background:#FFFFFF; border: 1px solid #666666; width:170px;"> </div>
<div align='center'><input type='submit' class='button' name='submit' value='Получить'></div><td class='menu' valign='top'><div class='title'> </div>

Как сделать так, что бы переходило при вводе только определенных символах.
Буду благодарен за помощь!

рони · #9 (**permalink**) 17.05.2015, 18:01

vlad0s0111,
открыли бы свою тему и для начала почитайте
https://learn.javascript.ru/forms-submit

Форум

Справочник

Discord чат

Курсы javascript