Изменение обтекания текстовой области с помощью JavaScript

Question

Для моего небольшого вики-приложения мне в основном нужно, чтобы текстовая область использовалась для редактирования содержимого с использованием мягкого (или виртуального) переноса. Тем не менее, в некоторых случаях предпочтительнее не переносить содержимое. Я думал, что сделал бы это, просто имея кнопку, чтобы отключить упаковку. Вот упрощенный код:

  <form name="wikiedit" action="[[script_name]]" method="post">
    <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
    <input type="button" onclick="document.wikiedit.content.wrap='off';" value="No Wrap"> &nbsp;
    <input type="submit" value="Save">
  </form>

Работает с IE, но не с Firefox или Opera. Как мне это сделать?

Answer 1

См. Ошибку 41464: https://bugzilla.mozilla.org/show_bug.cgi?id=41464

В настоящее время обходной путь - заменить текстовое поле на клон самого себя:

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap= wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute('wrap', wrap);
        var newarea= area.cloneNode(true);
        newarea.value= area.value;
        area.parentNode.replaceChild(newarea, area);
    }
}

Не связано: старайтесь избегать доступа к элементам прямо из объекта документа, это ненадежно в некоторых браузерах и вызывает проблемы с именами. «Document.forms.wikiedit» лучше, и теперь вместо формы «имя» в форме «id» вместо «name» с последующим использованием «document.getElementById ('wikiedit')» лучше.

form.elements.content также более надежен, чем form.content по аналогичным причинам ... или, действительно, вы можете присвоить текстовой области ID и перейти прямо к текстовой области с помощью getElementById, не беспокоясь о просмотре формы.

Answer 2

Вот пример по переносу текста, включая решение CSS:

http://www.web -wise-wizard.com / html-учебники / HTML-форм-форм-TextArea-wrap.html

CSS-решение, которое они цитируют:

white-space: pre; overflow: auto;

Что будет:

<script type="text/javascript">
function setNoWrap(textarea) {
    textarea.style.whiteSpace = 'pre';
    textarea.style.overflow = 'auto';
}
</script>
<form name="wikiedit" action="[[script_name]]" method="post">
 <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
 <input type="button" onclick="setNoWrap(this);" value="No Wrap">  
 <input type="submit" value="Save">
</form>

Answer 3

Вот вариант ответа Бобинса , который не требует клонирования текстовой области:

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap = wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute("wrap", wrap);
        area.style.overflow = "hidden";
        area.style.overflow = "auto";
    }
}

Это похоже на комментарий ВК в сообщении об ошибке, на которое ссылается bobince, но настройка отображения вместо переполнения не работает для меня, пока я не добавлю второй набор в setTimeout.

Answer 4

Попробуйте это расширение jQuery: Textarea Wrap Changer .

Answer 5

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

Чтобы заменить .cloneNode (), я думаю, что лучший метод:

child.setAttribute ('wrap', wrap); parent.removeChild (child); parent.appendChild (child);

используя этот способ, вы можете не только сохранять свои атрибуты, но также и добавленные вами атрибуты, например, дескриптор сценария или что-то еще.

Answer 6

Согласно спецификации HTML 4.01 , wrap не является допустимым атрибутом для <textarea> с, что объясняет, почему это так сложно и странно. Похоже, что Firefox действительно использует атрибут wrap, но он не позволит вам его изменить.

Хотя у меня есть решение! Это довольно ужасно, но вот оно. Полностью замените текстовое поле на новое.

// this is the onclick handler for your button
document.getElementById("nowrapButton").onclick = function() {
  var oldOne = this.form.content;  // the old textarea
  var newOne = document.createElement('textarea'); // the new textarea
  var attrs = ['name', 'rows', 'cols']; // these are the attributes to keep
  for (var i = 0; i < attrs.length; ++i) {
    // copy the attributes to the new one
    newOne.setAttribute(attrs[i], oldOne.getAttribute(attrs[i]));
  }

  // toggle the wrapping on and off
  if (oldOne.getAttribute('wrap') != 'off') {
    newOne.setAttribute('wrap', 'off');
  }

  // copy the text over
  newOne.value = oldOne.value;

  // add the new one
  oldOne.parentNode.insertBefore(newOne, oldOne);
  // get rid of the old one
  oldOne.parentNode.removeChild(oldOne);
  return false;
};

Вот рабочая версия, с которой вы можете играть: http://jsbin.com/ugepa

Как обычно, в jQuery это было бы намного лучше. :)