jQuery输入与textarea粘贴不同的行为

Question

I have been struggling to find a definite solution for this problem with paste on input.

I have got the following regex control on my input

var match = str.match(/^[^,]*,[^,]*,.*$/mg);

You can see the example of its usage on the following demo link. My problem is when I paste a content like

123, john smith, jack david
321, jackie ronal, david blah

into an input field, I get the whole content as a single entry whereas in the textbox it recognizes the new line and that is exactly what I am looking for (as you can see in the demo I procided).

Now, can anyone give me a nice solution to get this problem solved with input field would be great otherwise if I have to use textarea I need to find a way to make the textarea borders hidden but as far as my understanding there is no cross browser solution for it to do it nicely (hid all borders and resize icon in all browsers).

Here is the demo

http://jsfiddle.net/TCMcp/3/

Any help would be appreciated.

Answer 1

demo

Instead of an input, you can use a div with contenteditable set to true (this is technically incorrect, but provides support for IE). Example styles can be found in the fiddle.

<div contenteditable="true" id="input"></div>

We can then get the text content using JavaScript.

$('#input').on('paste', function () {
    setTimeout(function () {
        var str = $('#input').text();
        jsprint("pasted", str);
        $('#input').text(str); 
        var match = str.match(/^[^,]*,[^,]*,.*$/mg);             

    }, 100);
});