0

My problem is the following:

I have an input, simple as that:

<input type="text"/>

And when I try to paste some text that contains a new line in it, all the text after the new line does not appear.

Now I know this type of input shouldn't support such behavior, and the best scenario is to use a textarea but that would be hardly achievable in the current project I am working on.

However, other browsers convert the new line to a space character and append the text after the new line so you eventually get the whole text in a single line. IE doesn't do that.

I have found the following solution to intercept paste event and I thought maybe I can use it to transform the string into a single-lined but it doesn't work in firefox. I can try a browser detection but I am afraid it can fail in many other scenarios as well.

Is there something else that I can do to make IE behave like other browsers and what are my best options?

mx0
  • 6,445
  • 12
  • 49
  • 54
Samuil Petrov
  • 542
  • 1
  • 13
  • 24

2 Answers2

3

I found this answer that might be the solution to your problem: JavaScript get clipboard data on paste event (Cross browser)

It should work in IE6+, FF 22+, Chrome & Safari.

HTML

<input id='editableDiv' contenteditable='true' type="text"/>

JavaScript

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into input field
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    // Remove new line characters
    alert(pastedData);
    var res = pastedData.replace(/\r?\n|\r/g, );
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

Hope this helps mate.

George K
  • 481
  • 2
  • 13
0

Thanks for your answer George K - yours was the base for my solution. I had a few remaining problems to get past:

  1. addEventListener was giving me 'element not found'
  2. concatenated value wasn't populating the field

So I ended up with these slight modifications to your javascript:

function handlePaste(e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into input field
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    // Remove new line characters
    var res = pastedData.replace(/\r?\n|\r/g, ' ');
    document.getElementById(e.target.id).value = res; // <- added this to populate value
}

// added this also - this fixed my 'element not found' error
window.addEventListener('load', function () {
    document.getElementById('editableDiv').addEventListener('paste', handlePaste);
})

BTW, I am using an <asp:textbox> instead of an <input> element. This works for me in both IE (11) and Chrome (83.x).

Grits
  • 121
  • 1
  • 5