1

Здравствуйте! Помогите разобраться. Есть пара кнопок, которые добавляют в текстовое поле теги типа [code][/code] и [blockquote][/blockquote]. После нажатия на кнопку теги появляются и тут же происходит перезагрузка страницы - теги исчезают(

Пример кода:

 <form action="" method="post">
  <input type="submit" onclick="document.getElementById('text').value='[code][/code]'" value = "Добавить код" />
  <textarea cols="60"  rows="7" name="text" id="text"></textarea>
</form>

P.S. Извините за дублирование вопроса

1
  • 2
    Потому что после вставки кода идёт запрос на форму. Допишите return false после value='[code][/code]'"
    – ivkremer
    31 окт 2012 в 21:21

1 ответ 1

5

В событии onclick нужно вернуть false. Вот так:

onclick="document.getElementById('text').value='[code][/code]'; return false;"

Если нужно дополнить существующий текст, и ещё и позицию каретки выставлять, то лично мне удобнее написать отдельную функцию:

function onSomeClick(typeInsert) { // функция добавляет необходимый тэг в textarea
  var txt = document.getElementById('text');
  var tag, caretpos=0;
  switch(typeInsert) { 
    case 'code':
      tag = '[code][/code]';
      caretpos = 8;
      break;
    case 'bq':
      tag = '[blockquote][/blockquote]';
      caretpos = 14;
      break;
  }
  txt.value += tag;
  setCaretPosition(txt, txt.value.length-caretpos) //устанавливаем позицию каретки
  return false;

}

function setCaretPosition(elem, caretPos) { //функция устанавливает позицию каретки в указанное место
if(elem != null) {
    if(elem.createTextRange) {
        var range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    }
    else {
        if(elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(caretPos, caretPos);
        }
        else
            elem.focus();
    }
}

}

У моего варианта есть 1 минус: нельзя вставить код в любое место в тексте. Но, разобравшись как работает функция setCaretPosition и как можно получить положение каретки в textarea, агрейднуть мою функцию Вам не составит труда. P.S. В коде возможны очепятки, надеюсь всё верно работает.

3
  • Спасибо:) А как сделать, чтобы теги не затирали уже введенный текст и еще чтобы курсор оказался между тегами - [code]|[/code]
    – noob_pro
    31 окт 2012 в 21:36
  • А можно сделать так: pos = s.lastIndexOf(']['); а потом вызвать setCaretPosition, подставив вместо caretPos - pos+1. 1 ноя 2012 в 11:22
  • Спасибо большое! Очень помогло:)
    – noob_pro
    1 ноя 2012 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.