在输入类型文本中粘贴多行文本(不是textarea)

Question

我有一个input type text用户输入用,或分隔的数字代码-(用于制作范围).我想允许我网站的用户粘贴代码列表.我已经设法绑定粘贴事件(使用jQuery)并解析输入字符串删除空格和所有内容.

当用户代码列表是多行时,问题开始.在浏览器尝试将其插入输入之前,我没有找到任何方法来操作该文本,因此字符串在第一行的末尾被截断.有没有办法在浏览器截断它之前操纵字符串？

谢谢!

这里更新有一个JSFiddle的例子...愚蠢的IE,在FF这很好用.

Answer 1

我构建了一个插件来替换<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 上查看