Javascript onpaste replaceAll

Question

Javascript onpaste replaceAll

2.2k Views Asked by Gouri Yashodhan At 05 April 2025 at 13:28

I want to paste in a textBox and after I paste it, it should replace all spaces with commas.

<!DOCTYPE html>
<html>
<body>

<input id="pc" type="text" contenteditable="true" onpaste="myFunction()" size="60" >


<script>
function myFunction() {
 var e=document.getElementById("pc"); 
 setTimeout(function(){alert(e.value);}, 45);
 var x = document.getElementById("pc").value;
 alert(x);
 var s = x.replaceAll(" ",",");
 alert(s);

 document.getElementById("pc").value = s;
}
</script>
</body>
</html>

My first alert prints blank. Second alert ( alert(x)) also blank. Third alert ( alert(s)) print the text I'm trying to paste.

I expect the third alert to print the replaced text and this value overrides the pasted value in the text box.

Original Q&A

There are 2 best solutions below

**user3483203** · Answer 1

This answer uses Jquery:

You can first bind to a paste event within the text input, and then grab the result of the paste event into a variable. Then, to replace the spaces with commas, you just need a very basic regex: data.replace(new RegExp(' ', 'g'), ','), which replaces every space with a comma.

$('#pc').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    data = data.replace(new RegExp(' ', 'g'), ',');
    alert(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <input id="pc" type="text" contenteditable="true"size="60">


</body>

</html>

**ThatJSMan** · Answer 2

The first alert is in a different scope and so e.value is undefined because e is undefined in its current scope. The second alert is blank because the event is triggered onpaste not post-paste and so onpaste the value isn't updated and so gives the previous value before the paste. The third paste directly modifies the value and so the new value gets used. You might want to try checking the keyup event for Ctrl+V if you want the other two alerts to work properly.

<input id="pc">
<script>
window.onload = function() {
    document.getElementById('pc').onkeyup = function(e) {
        this.value = this.value.replace(/ /g,',');
    }
}
</script>

Javascript onpaste replaceAll

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REPLACE

Related Questions in ONPASTE

Trending Questions

Popular # Hahtags

Popular Questions