» Javascript: Вставка текста в textarea в положение курсора

Цитата:

Сейчас фф выдает ошибку в 17 строчке

ну я же написал выше.. не name='message', a id='message'

Cheery
http://www.khspu.ru/~Board/js/5.htm
Вставляет в Мозилле 1.0.7

Цитата:

undefined

http://www.khspu.ru/~Board/js/2.htm
Скрипт из борды мое обоснование работы если я в чем-то не прав напишите.

Вот последний вариант рабочий, но в данном варианте есть небольшой косяк в Мозиле ФФ не вставляет на место курсора, а просто добавляет в конец строки.


Код:
function quoteSelection() {
theSelection = false;
if (document.selection) { theSelection = document.selection.createRange().text; // Get text selection
// Add tags around selection
emoticon('[_quote]' + theSelection + '[_/quote]\n');
document.getElementById('message').focus();
theSelection = '';
return;
}else if (window.getSelection){ theSelection = window.getSelection(); // Get text selection
// Add tags around selection
emoticon('[_quote]' + theSelection + '[_/quote]\n');
document.getElementById('message').focus();
theSelection = '';
return;
}
else{
alert('{L_NO_TEXT_SELECTED}');
}
}

function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

function emoticon(text) {
if (document.post.message.createTextRange && document.post.message.caretPos) {
var caretPos = document.post.message.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
document.post.message.focus();
} else {
document.post.message.value += text;
document.post.message.focus();
}
}

</script>
Для вставки цитаты, выделите её и нажмите
<span class="nav"><a href="javascript:quoteSelection();" title="Цитировать выделенный текст." class="nav">{L_QUOTE_SELECTED}</a></span><br /><br />
<textarea name='message' id='message' rows='15' cols='125' wrap='virtual' tabindex='3' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>

Cheery
Вот тут пошаманил с кодом от phpbb вроде все работает, не могли бы проверить.
создаем script.js файлик вот с таким содержимым

Код:
var text_no_selected = "Выберите текст для вставки";

var clientPC = navigator.userAgent.toLowerCase();
var clientVer = parseInt(navigator.appVersion);

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
&& (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
&& (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

function mozillaWr(textarea, open, close)
{
var selLength = textarea.textLength;
var selStart = textarea.selectionStart;
var selEnd = textarea.selectionEnd;
if (selEnd == 1 || selEnd == 2)
selEnd = selLength;

var s1 = (textarea.value).substring(0,selStart);
var s2 = (textarea.value).substring(selStart, selEnd)
var s3 = (textarea.value).substring(selEnd, selLength);
textarea.value = s1 + open + s2 + close + s3;

textarea.selectionEnd = 0;
textarea.selectionStart = selEnd + open.length + close.length;
return;
}

function insert_into_position_cursor(text)
{
var textarea = document.post.message;
if (textarea.createTextRange && textarea.caretPos)
{
var caretPos = textarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
}
else {
if (is_nav && document.getElementById)
{
mozillaWr(textarea, '', text);
}
else { textarea.value += text; }
}
textarea.focus();
}

function copySelection()
{
if (window.getSelection) { selection = window.getSelection().toString(); }
else if (document.getSelection) { selection = document.getSelection(); }
else if (document.selection) { selection = document.selection.createRange().text; }
}

function pasteSelection()
{
if (selection)
{
insert_into_position_cursor('[_quote]' + selection + '[_/quote]\n');
selection = '';
document.post.message.focus();
return;
}
else { alert(text_no_selected); return; }
}
// функцию можно также использовать потом как облачение теги code, можно в b ....
//На самом деле как вы уже поняли этим не ограничивается создаем сколько нам нужно функций и юзаем их
function codeSelection(text)
{
text = '[_code] ' + text + ' [_/code]';
insert_into_position_cursor(text);
}

function storeCaret(textEl)
{
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

Paha_W
Получается, что весь этот код работает только для того, что бы обрамить выделенный текст тегом и вставить его в определённйю зону?
Тогда это слишком громоздко.

VVL99

Цитата:

Тогда это слишком громоздко.

если есть свои варианты, то показывайте.

Вот простой вариант. Я не преследовал кроссбраузерность, по этому если вам нужен IE или OPERA, то нужно добавить пару условий, я делаю себе расширение для хрома.
Значит код выполняет три "функции":
1) Вставляет бб код в определённое поле ввода.
2) Обрамляет тегом выделенный текст на странице и вставляет результат в поле ввода.
3) Обрамляет тегом выделенный текст в поле ввода.


Код:
<html>
<body>
<p>Попробуйте выделить часть этого текста мышкой или напечатать свой и нажать на ссылку BB code или просто нажмите ссылку.</p>
<textarea id = "postarea" class = "text_area" rows = "5" cols = "120" name = "txt"></textarea>
<a href="#" onClick = "javascript:tag_add(postarea)"><b>BB code</b></a>
</body>
<script>
function tag_add(obj) {
var text = window.getSelection();
var start = obj.selectionStart;
var end = obj.selectionEnd;
val = obj.value.substr(start,end-start);
    str1 = '[spoiler]';
    str2 = '[/spoiler]';
if (val) {
obj.value = obj.value.substr(0, start) + str1 + val + str2 + obj.value.substr(end);
}
    else if (text) {
obj.value = obj.value.substr(0, start) + str1 + text + str2 + obj.value.substr(end);
}
else {
obj.value = obj.value + str1 + str2;
}
}
</script>
</html>

VVL99

Цитата:

по этому если вам нужен IE или OPERA,

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

код используемый на форуме, к примеру, был написан как раз в 2004-2005 годах, но до сих пор работает.

Ну под все версии это уж слишком.
У меня вот вопрос есть, я хотел разобраться, но так и не доходят руки, было бы правельнее если текст вставляется не в определённое поле, а именно туда где каретка курсора, поскольку поля ввода бывают разные и даже скриптовые, и ctrl+V всегда правильно определяет, а вот скриптовую версию не разу не видел.

VVL99

Цитата:

а вот скриптовую версию не разу не видел.

по событиям onselect, onclick, onkeyup, onfocus, к примеру, "запоминайте" в каком элементе находится курсор

Кстати, вот голая функция, если выделить текст на странице и вызвать её, то она покажет текст в модале, причём работает во всех браузерах и не такая уж громоздкая.

Код:
var ie = false;
if ( window.getSelection ) {
var selectedText = window.getSelection();
} else if ( document.getSelection ) {
var selectedText = document.getSelection();
} else if ( document.selection ) {
ie = true;
var selectedText = document.selection.createRange();
}
if(!ie){
alert(selectedText)// просто выведет выделенный текст без тегов
var theParent = selectedText.getRangeAt(0).cloneContents();
alert(toHTML(theParent)) // собственно выделенный кусок кода
}else{
alert(selectedText.text) // текст
alert(selectedText.htmlText) // выделенный кусок кода
}

VVL99

Цитата:

то она покажет текст в модале

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

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

VVL99

Цитата:

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

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

это все усложняет и увеличивает код.

Cheery
А я с этого и начал, мой пост с первым кодом именно это и делает, единственное, что там переменная определяется не во всех браузерах, а вторая часть кода именно заменяет выделенный текст в поле ввода на тотже, только с тегом, соответственно, берём переменную из второго кода и всё готово.
Ну, ради интереса сделаю пример.

Добавлено:
Вот готовый вариант, идея не моя, но работает во всех браузерах.

Код:
<html>
<body>
<p>Напечатайте текст, выделите его и нажмите ссылку BB code.</p>
<textarea id = "postarea" class = "text_area" rows = "5" cols = "120" name = "txt"></textarea>
<a href="#" onClick = "javascript:tag_add(postarea, '[spoiler]', '[/spoiler]')"><b>BB code</b></a>
</body>
<script>
function tag_add(obj, str1, str2) {
if(document.selection) { // Для IE
var s = document.selection.createRange();
if (s.text) {
s.text = str1 + s.text + str2
} else {
obj.value = obj.value + str1 + str2
}
}
else if (typeof(obj.selectionStart) == "number") { // Opera, FireFox, Chrome
if (obj.selectionStart != obj.selectionEnd) {
var start = obj.selectionStart;
var end = obj.selectionEnd;
s = obj.value.substr(start,end-start);
obj.value = obj.value.substr(0, start) + str1 + s + str2 + obj.value.substr(end)
} else {
obj.value = obj.value + str1 + str2
}
}
}
</script>
</html>
</html>

Можно этот скрипт:


Код:
<html>
<body>
<p>Напечатайте текст, выделите его и нажмите ссылку BB code.</p>
<textarea id = "postarea" class = "text_area" rows = "5" cols = "120" name = "txt"></textarea>
<a href="#" onClick = "javascript:tag_add(postarea, '[spoiler]', '[/spoiler]')"><b>BB code</b></a>
</body>
<script>
function tag_add(obj, str1, str2) {
if(document.selection) { // Для IE
var s = document.selection.createRange();
if (s.text) {
s.text = str1 + s.text + str2
}
} else { // Opera, FireFox, Chrome
var start = obj.selectionStart;
var end = obj.selectionEnd;
s = obj.value.substr(start,end-start);
obj.value = obj.value.substr(0, start) + str1 + s + str2 + obj.value.substr(end)
}
}
</script>
</html>