Вставить многострочный текст в текст типа ввода (не в текстовую область)

У меня есть input type text, где пользователи вводят числовые коды, разделенные , или - (для создания диапазона). Я хочу разрешить пользователю моего сайта вставлять список кодов. Мне уже удалось связать событие вставки (с помощью jQuery) и проанализировать входную строку, удалив пробелы и все такое.

Проблема начинается, когда список кодов пользователей многострочный. Я не нашел способа манипулировать этим текстом до того, как браузер попытается вставить его во входные данные, поэтому строка усекается в конце первой строки. Есть ли способ манипулировать строкой до того, как браузер ее обрежет?

Спасибо!

Обновление здесь есть пример с JSFiddle... Глупый IE , в FF это прекрасно работает.


javascript html jquery multiline textinput
person Diego    schedule 02.03.2012    source источник
comment
Не могли бы вы показать jsFiddle, пожалуйста?   -  person Ry-♦    schedule 02.03.2012
comment
Можете ли вы предоставить образец? Я проверил это в JSfiddle без каких-либо проблем.   -  person Smamatti    schedule 02.03.2012
comment
Я только что сделал пример... это глупый IE   -  person Diego    schedule 02.03.2012

Ответы (3)


arrow_upward
2
arrow_downward

Я создал плагин для замены ввода на <textarea>. Вот:

// Debe llamarse al plugin antes de construir cualquier referencia al elemento.
// El nuevo elemento debe seleccionarse por id, por name o por clases.
// En el momento de llamar al plugin el elemento debe estar visible.

// Translate:
// The plugin must be called before saving any reference to the element.
// The new element must be selected by its id, name or classes, not by the tag "input".
// When the plugin is called the element must be visible.

$.fn.acceptMultiline = function() {
  var txt = $(this),
    txtArea = $("<textarea></textarea>");

  if (txt.attr("style") != undefined)
    txtArea.attr("style", txt.attr("style"));

  if (txt.attr("class") != undefined)
    txtArea.attr("class", txt.attr("class"));

  if (txt.attr("name") != undefined)
    txtArea.attr("name", txt.attr("name"));

  if (txt.attr("id") != undefined)
    txtArea.attr("id", txt.attr("id"));

  txtArea
    .width(txt.width())
    .height(txt.height())
    .css("resize", "none");

  txt.after(txtArea)
    .remove();

  txtArea.on("input", function() {
    txtArea.val(txtArea.val().replace(/\r\n/g, " ").replace(/\r/g, " ").replace(/\n/g, " "));
  });
};

$(":text").acceptMultiline();

$("button").on("click", function() {
  $(".txt").val($(".txt").val() + "pepe");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="text" style="width: 700px;" class="txt" />
<button>Change value of txt</button>

Просмотр на JSFiddle

person Diego    schedule 06.03.2012

arrow_upward
0
arrow_downward

Преобразуйте строку в одну строку, удалив разрывы строк.

"multiline\ntext\nline3".split('\n').join('');
person John Strickler    schedule 02.03.2012
comment
Когда запускается событие вставки, я уже потерял все строки, кроме первой. - person Diego; 02.03.2012
comment
о чувак. Это будет проблемой ... Я думаю, что решение будет заключаться в использовании textarea для принятия вставки, а затем копировании значения в ваш input. - person John Strickler; 02.03.2012

arrow_upward
0
arrow_downward

Проверьте эту ветку SO. Он ссылается на jsfiddle с кодом, который, я думаю, справится с вашей проблемой.

Можно ли получить вставленный текст без используя функцию setTimeout()?

Ссылка на jsfiddle http://jsfiddle.net/pxfunc/KDLjf/

person Community    schedule 02.03.2012
comment
В firefox этот способ работает идеально (точно так же, как мой подход). К сожалению, в IE этого нет, он также обрезает текст после первой строки. - person Diego; 05.03.2012