powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Гиперссылки как у iCloud Pages, Google Docs
1 сообщений из 1, страница 1 из 1
Гиперссылки как у iCloud Pages, Google Docs
    #39613034
KOT301
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Добрый день, как сделать гиперссылки как у iCloud Pages когда пишешь сайт и он сразу становится ссылкой как и в Google Docs.
Например я пишу в тексте http://ya.ru или почту и эта ссылка автоматически становится кликабельной.
Пробовал разные функции через onkeyup,
одна их них:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
jQuery(function($) {
    var re = /((http|https|ftp):\/\/[a-zа-я0-9\w?=&.\/-;#~%-]+(?![a-zа-я0-9\w\s?&.\/;#~%"=-]*>))/g;
    var em = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;
    function makeHTML(textNode) {
        var source = textNode.data;
        return source.replace(re, function() {
            var url = arguments[0];
            var a = $('<a onclick="window.open(\''+url+'\');" target=""></a>').attr({'onclick' : 'window.open(\'' + url + '\');', 'href': '#', 'target': '_blank'}).text(url);
            return url.match(/^https:?\/\/$/) ? url : $('<div></div>').append(a).html();
        });
    };
    function makeEmail(textNode) {
        var source = textNode.data;
        return source.replace(em, function() {
            var url = arguments[0];
            var a = $('<a></a>').attr({'onclick' : 'window.open(\'mailto:' + url + '\'); return false;','href': '#', 'target': '_blank'}).text(url);
            return url.match(/^[\w.]+@[a-zA-Z0-9.\w?=&\/-;#~%-]$/) ? url : $('<div></div>').append(a).html();
        });
    };
    function eachText(node, callback) {
        $.each(node.childNodes, function() {
            if (this.nodeType != 8 && this.nodeName != 'A') {
                this.nodeType != 1 ? callback(this) : eachText(this, callback);
        }});
    };
    $.fn.autolink = function() {
        return this.each(function() {
            var queue = [];
            eachText(this, function(e) {
                var html = makeHTML(e);
                var email = makeEmail(e);
                if (html != e.data) {
                    queue.push([e, makeHTML(e)]);
                }
                if (email != e.data) {
                    queue.push([e, makeEmail(e)]);
                }
            });
            $.each(queue, function(i, x) {
                $(x[0]).replaceWith(x[1]);
            });
        });
    };
});


Имеется <div id="text" contenteditable="true"></div>, я пишу
Код: javascript
1.
2.
3.
4.
5.
$(document).ready(function() {
        $('[contenteditable="true"]').keypress(function (e) {
                    $('#text').autolink();
               });
    });

текст становиться ссылкой, но курсор перебрасывается на то место откуда я начал писать эту ссылку. Подскажите как можно переделать эту функцию или есть какие-то другие способы реализовать подобное?
...
Рейтинг: 0 / 0
1 сообщений из 1, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Гиперссылки как у iCloud Pages, Google Docs
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]