Как сделать всплывающий блок при выделении текста?

Question

[Павел]

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

на сайте www.zenpen.io , как сделать чтоб при выделении появлялся .. не важно что , просто чтоб возле курсора div или span или еще что

Answer 1

[Павел]

var getSelectedText = function() {
        var text = '';
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection) {
            text = document.selection.createRange().text;
        }
        return text;
    };

    $('.класс у которого происходит выделение').on('mouseup', function(){
        var text = getSelectedText();
        if (text != ''){
            alert('действие при выделении');
        }
    });

тадамс :)

Comments

[Johny Smith]

такая простая фича делается 15 строками кода? ого не много-ли? или для JS это нормально?

[Павел]

Olek1, что вы имеете введу?

[Johny Smith]

mrusklon, имею ввиду что такая простая функция а так много кода надо написать, усомнился в языке JS

[Павел]

Olek1, это много кода?)

[Johny Smith]

mrusklon, для такой простой вещи да имхо это всего навсего hoverTextSelected лол

[Павел]

Olek1, аналог в студию

[Johny Smith]

mrusklon, не не) я не кодер, а просто любитель

[Павел]

Olek1, фейспалм че...

[Сергей delphinpro]

Olek1, проблема не в js, а в том, как его поддерживают браузеры. Поэтому функция чуток раздута - для поддержки.

[Rinat Valiullov]

не работает корректно, я смотрел исходники!

Answer 2

[Владислав Богомазов]

before, after, position: absolute, а родителю position: relative

Comments

[Павел]

а как именно при выделении текста это сделать?

[freekir]

jsfiddle.net/FvnPS/11 в этом направление можно подумать

Answer 3

[Rinat Valiullov]

А как отловить-то отсутствие выделенного текста, чтобы убрать тултип???

Comments

[Johny Smith]

разве нельзя никак посмотреть исходники на самом сайте www.zenpen.io?

[Павел]

ну так есть проверка , if (text != '') , если выделено пусто то нечего не произойдет

[Johny Smith]

ну так есть проверка , if (text != '') , если выделено пусто то нечего не произойдет

а на сайте www.zenpen.io в каком файле и как отсутствие тултипа прописано?

почемуто думал что он всегда гдето есть, просто скрывается както invisible, и в нужный момент становится visible

[Павел]

Olek1, ну вы не путайте теплое с мягким , там целый редактор с огромным функционалом

[Johny Smith]

mrusklon, логично думать что в ui.js www.zenpen.io/js/ui.js ?

[Johny Smith]

mrusklon,

Это не оно?

function onOverlayClick( event ) {

		if ( event.target.className === "overlay" ) {
			removeOverlay();
		}
	}

	function removeOverlay() {
		
		overlay.style.display = "none";
		wordCountBox.style.display = "none";
		descriptionModal.style.display = "none";
		saveModal.style.display = "none";
		
		if ( document.querySelectorAll('span.activesave' ).length > 0) {
			document.querySelector('span.activesave').className = '';
		}

		saveFormat='';
	}

	return {
		init: init
	}

я не программист, просто интересно найти в коде это, очень понравился вопрос

[Rinat Valiullov]

не работает проверка на пустую строку, я смотрел исходники

[Rinat Valiullov]

Olek1, вот сам не знаешь, а мне советуешь)))

[Rinat Valiullov]

короче я пробывал isCollapsed, но это не работает. Типо нажимаешь в другую область и тултип пропадает, ан нет, не выходит

[Rinat Valiullov]

[Johny Smith]

вот сам не знаешь, а мне советуешь)))

Rinat Valiullov, я не советую, поставил же знаки вопроса что означало что это тоже вопрос, я такой же самый как и ты, к тому же я указал что я вообще не прогер, мне просто понравился очень понравился этот вопрос, и тоже стало интересно, и сам спрашиваю)))) на чём всё закончилось, нашлось это событие скрытия тултипа?

[Rinat Valiullov]

Olek1, вот сижу туплю, пока нет. но уже просветление появляется. Вот если бы автор появился и нормально объяснил все было бы здорово!
Там думаю объект Selection, и с ним надо играться (с его свойствами и методами)ю Вот не получается пока. Читаю спеку, разбираюсь.
Да мне тоже понравилось. Как на медиуме - прикольно