HTML5 за 10 минут

Ввод кнопки добавления ссылки


С помощью кнопки Добавить ссылку и команды создания ссылки createlink можно разрешить пользователю вводить ссылки в редактируемый текст. Как только пользователь выделит отдельный фрагмент текста и щелкнет на кнопке Добавить ссылку, откроется диалоговое окно, в котором ему будет предоставлена возможность ввести URL для ссылки на конкретный веб-сайт, а затем из выделенного фрагмента текста будет создана сама ссылка.

Для того чтобы ввести кнопку Добавить ссылку в пример HTML- документа editdiv.html, выполните следующие действия.

1.   Откройте HTML-документ из файла editdiv.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите выделенный ниже полужирным код для создания кнопки Добавить ссылку и вызова функции createlink ().

<!DOCTYPE html>

<html>

<head>

<title>

Редактируемый элемент &lt;div&gt;

</title>

</head>

<body>

<hlРедактируемый элемент &lt;div&gt;</hl>

<div>

<input type=,button" value="jr

one lick="document. execCommand (bold, false, null);">

<input type="button" value="K" onclick="document.execCommand (italic, false, null);"> <input type="button" value="4" onclick="document. execCommand (underline, false, null);"> <input type=,button" уа1ие="Добавить ссылку" onclick="createLink();">

</div>

<br>

<div id="div" style-border: solid black; height: ЗООрх; width: 450px contenteditable="true">

</div>

</body>

</html>

3.   Введите выделенный ниже полужирным код JavaScript, чтобы получить сначала URL, вводимый пользователем для ссылки в открывающемся диалоговом окне, а затем добавить этот URL к ссылке с помощью команды createlink.

<1DOCTYPE html>

<html>

<head>

<title>

Редактируемый элемент &lt;div&gt;

</title>

<script type="text/javascript"> function createLink()

{

var url = prompt("Введите веб-адрес:", "http://"); if (url)

document.execCommand("createlink", false, url);

}

</script>

<7head>

<body>

<hl Редактируемый элемент &lt;div&gt;</hl>

<div>

<input type="button" value="JK" onclick="document. execCommand (bold, false, null);">

<input type="button" value="K" onclick="document.execCommand (italic, false, null);"> <input type="button" value="4"

onclick="document. execCommand(underline, false, null); "> <input type="button" уа1ие="Добавить ссылку" onclick="createLink();">

</div>

<br>

<div id="div" style-border: solid black; height: ЗООрх; width: 450px contenteditable="true">

</div>

</body>

</html>

4.   Сохраните внесенные изменения в файле editdiv.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Теперь пользователь может выделить текст и щелкнуть на кнопке Добавить ссылку, чтобы превратить выделенный текст в гиперссылку, как показано на 5.5, где ссылка выделена подчеркиванием, как и после щелчка на кнопке Ч.

Комментарии закрыты