Question

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

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

谢谢！

更新 here有一个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>

View on JSFiddle

Answer 2

通过删除换行符将字符串转换为一行。

"multiline\ntext\nline3".split('\n').join('');

Answer 3

检查此SO线程。它链接到一个jsfiddle，它具有我认为可以处理您的问题的代码

Is it possible to get pasted text without using the setTimeout() function?

jsfiddle http://jsfiddle.net/pxfunc/KDLjf/

的链接

Answer 4

您可以在IE下使用以下解决方法。请阅读代码示例中的注释 -

    jQuery("input").bind("paste", function() {
        var element = jQuery(this);
        setTimeout(function () {
            var text = element.val();
// window.clipboardData works only in IE.
//  For other browsers, element.val() should work
            if(window.clipboardData){
              text = window.clipboardData.getData('Text');
            }
                matches = text.match(/[^0-9]+/g);
            if (matches != null) {
                for (var i = 0; i < matches.length; i++) {
                    text = text.replace(matches[i], ((matches[i].indexOf("-") < 0) ? "," : "-"));
                }
                element.val(text);
            }
        }, 100);
    });

在输入类型文本中粘贴多行文本（不是textarea）

4 个答案: