javascript - Paste multiline text in input type text (not textarea) - Stack Overflow

admin管理员组

文章数量:1404469

I have a input type text where the users enter numeric codes separated by , or by - (to make a range). I'd like to allow the user of my site to paste a codes list. I've already managed to bind paste event (with jQuery) and parse the input string removing spaces and everything.

The problem starts when the user codes list is multiline. I haven't found any way to manipulate that text before the browsers attempts to insert it into the input, so the string is truncated at the end of the first line. Is there any way to manipulate the string before the browser truncates it?

Thanks!

Update here there is an example with JSFiddle... Stupid IE, in FF this works great.

I have a input type text where the users enter numeric codes separated by , or by - (to make a range). I'd like to allow the user of my site to paste a codes list. I've already managed to bind paste event (with jQuery) and parse the input string removing spaces and everything.

The problem starts when the user codes list is multiline. I haven't found any way to manipulate that text before the browsers attempts to insert it into the input, so the string is truncated at the end of the first line. Is there any way to manipulate the string before the browser truncates it?

Thanks!

Update here there is an example with JSFiddle... Stupid IE, in FF this works great.

• javascript
• jquery
• html
• multiline
• textinput

Share Improve this question Follow edited Mar 2, 2012 at 15:12 Diego asked Mar 2, 2012 at 15:02 DiegoDiego 16.7k2626 gold badges8888 silver badges136136 bronze badges 3

• Can you show a jsFiddle, please? – Ry- ♦ Commented Mar 2, 2012 at 15:05
• Can you provide a sample? I tested this this within a JSfiddle without any problem. – Smamatti Commented Mar 2, 2012 at 15:06
• I've just made the example... it is the stupid IE – Diego Commented Mar 2, 2012 at 15:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I built a plugin to replace the input for a <textarea>. Here it is:

// 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./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

Convert the string to one line by remove the line breaks.

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

Check this SO thread. It links to a jsfiddle that has code that i think will handle your problem

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

The link to the jsfiddle http://jsfiddle/pxfunc/KDLjf/

本文标签： javascriptPaste multiline text in input type text (not textarea)Stack Overflow