Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Гиперссылки как у iCloud Pages, Google Docs / 1 сообщений из 1, страница 1 из 1
11.03.2018, 17:46
    #39613034
KOT301
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гиперссылки как у iCloud Pages, Google Docs
Добрый день, как сделать гиперссылки как у 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
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Гиперссылки как у iCloud Pages, Google Docs / 1 сообщений из 1, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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