Форум

Cuprum · #1 (**permalink**) 03.08.2010, 20:09

Есть незамысловатый код ((document).ready подразумевается):

var textSelection = ''; 
function getSel() { //функция пишет в переменную выделение мышкой
	if (textSelection = window.getSelection)	// !IE
		textSelection = window.getSelection().toString();
	else	// IE
		textSelection = document.selection.createRange().text;
	return textSelection;
}
$('body').mouseup(function(){
		getSel();		
});
$('#link').click(function () {
		alert (textSelection);
});

Проблема вот в чем: почему то обработчик работает как-то не так (а может я чего-то не знаю

). Если элемент это ссылка с id="link", то все в порядке, в модальном окне виден выделенный текст. Но если элемент не является ссылкой (например <div id="link">, <span id="link"> и т.д.) то появляется просто пустое модальное окно.
Вопросы просты: как заставить обрабочик выводить выделенный фрагмент по клику на блоке (нужно именно это) и где ошибка в приведенном коде?

рони · #2 (**permalink**) 04.08.2010, 22:06

1.

if (textSelection = window.getSelection)

должна быть

if (window.getSelection)

2. так как click состоит из mousedown, mouseup $('#link').click стирает предыдущее выделение, если выделение было на другом элементе кроме #link'
надо менять логику скрипта или как вариант сделать так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body><div id="link">Выдели текст и кликни тут!!!</div><div id="link0">всякий разный текст</div><div id="link1">всякий разный текст</div><div id="link2">всякий разный текст</div>

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var textSelection = '';

function getSel() { //функция пишет в переменную выделение мышкой

    if (window.getSelection) // !IE
    textSelection = window.getSelection().toString();
    else // IE
    textSelection = document.selection.createRange().text;
    return textSelection;
}
$('body').mouseup(function () {
    getSel();
});
$('#link').mouseup(function () {
    if (textSelection) alert(textSelection);
});
</script>
</body>

</html>

Cuprum · #3 (**permalink**) 04.08.2010, 22:59

Спасибо за код и инфу, по поводу затирания не знал. А если как-то в моем выражении

$('body').mouseup(function(){
	        getSel();      
});

докапаться до того элемента где непосредственно происходит событие и работать уже с ним? Это спасет? Те "слушать" весь body, но при отпускании мыши работать с тем элементом, над которым произошел mouseup.

Octane · #4 (**permalink**) 04.08.2010, 23:57

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

1.

if (textSelection = window.getSelection)

должна быть

if (window.getSelection)

Здесь нет ошибки.

Я бы сделал как-то так:

$Selection = {
	standardsCompliant: typeof getSelection != "undefined",
	get: function () {
		return this.standardsCompliant ? getSelection() : document.selection;
	},
	getRange: function () {
		return this.get()[this.standardsCompliant ? "getRangeAt" : "createRange"](0);
	}
};

$Range = {
	standardsCompliant: $Selection.standardsCompliant,
	stringify: function (range) {
		return this.standardsCompliant ? range.toString() : range.text;
	}
};

var text;

$("body").mouseup(function () {
	text = $Range.stringify($Selection.getRange());
});

$("#link").click(function () {
	alert(text);
});

Cuprum · #5 (**permalink**) 05.08.2010, 00:34

Octane,

Цитата:

Здесь нет ошибки

Зато чуть покороче,

А в чем преимущество вашего способа определения выделения (сложновато будет

) перед функцией?
ЗЫ. $Selection - это объект, не так ли?

x-yuri · #6 (**permalink**) 05.08.2010, 00:38

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

Function.prototype.bind = function(scope) {
    var that = this, args = [].slice.call(arguments, 1);
    return function() {
        return that.apply(scope || this, args.concat([].slice.call(arguments, 0)));
    };
};

function QuoteLink( el ){
    this._el = $(el);
    $("body").mouseup( this._onMouseUp_body.bind(this) );
    this._el.click( this._onClick.bind(this) );
}

QuoteLink.prototype._onMouseUp_body = function(){
    this._text = $Range.stringify($Selection.getRange());
}

QuoteLink.prototype._onClick = function(){
    alert(this._text);
}

x-yuri · #7 (**permalink**) 05.08.2010, 00:39

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

Зато чуть покороче,

и что, что короче?

Cuprum · #8 (**permalink**) 05.08.2010, 00:50

Сообщение от x-yuri

и что, что короче?

Если можно сделать проще и это работает, зачем городить огород? (В принципе, не только применительно к коду.)

Octane · #9 (**permalink**) 05.08.2010, 01:08

Ой самое главное забыл дописать. Чтобы ваш вариант работал, нужно preventDefault выполнить по mousedown на #link.

<!DOCTYPE html>
<meta charset="utf-8">
<div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<span id="test">test</span>
</div>
<script>
$Selection = {
	standardsCompliant: typeof getSelection != "undefined",
	get: function () {
		return this.standardsCompliant ? getSelection() : document.selection;
	},
	getRange: function () {
		return this.get()[this.standardsCompliant ? "getRangeAt" : "createRange"](0);
	}
};

$Range = {
	standardsCompliant: $Selection.standardsCompliant,
	stringify: function (range) {
		return this.standardsCompliant ? range.toString() : range.text;
	}
};

//~~~~~~~~~~~~~~~~~~~~~~~

var text;

document.body.onmouseup = function () {
	text = $Range.stringify($Selection.getRange());
};

var btn = document.getElementById("test");

btn.onmousedown = function (event) {
	if (event && event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue = false;
	}
};

btn.onclick = function () {
	alert(text);
};
</script>

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

ЗЫ. $Selection - это объект, не так ли?

Да обычный объект.

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

А в чем преимущество вашего способа определения выделения (сложновато будет) перед функцией?

Ничего в этом коде сложного нет. Преимущество в том, что кросс-браузерная работа с Selection/Range/TextRange вынесена из тела функции и эти методы можно будет использовать где-то еще. В таком коде легче разобраться.

Короче не всегда лучше.

x-yuri · #10 (**permalink**) 05.08.2010, 01:16

проще понятие неоднозначное и уж точно не то же самое, что и "меньше строк". Меньше строк получилось? Отлично. А строки от этого проще стали? Пихать все в одну строку - усложнение кода (понимания кода). В частности, использование выражений с побочными эффектами. Разве не проще рассчитывать, что все выражения будут без побочных эффектов? Для меня же проще в первую очередь, когда я вижу что происходит, а не как это реализовано (это в целом про "что такое просто для меня"). Да и Эйнштейн, ведь, говорил про "настолько просто, насколько это возможно", а не про "максимально просто"

Вариант Octane - это выделение библиотечного кода, который будет повторно использоваться. Мой вариант - выделение компонентов, которые тоже будут повторно использоваться. Для кода в первом сообщении это, в общем-то, не актуально, но ведь это не окончательный вариант?

Форум

Справочник

Discord чат

Курсы javascript