How to split a string into several html text fields

Question

I have 2 input fields in a html file, text1 and text2. Then I copy a long string and paste it into text1. I want the string splited automatically into text1 and text2. So there must be a delimiter e.g TAB (ASCII 9) in the string. I have been trying many times but no lucky. In my experiment, there is a button calling javascript function as follows :

<script>
function Chr(AsciiNum)
{
return String.fromCharCode(AsciiNum)

}

function test()
{ 
  c = "ABC"+Chr(9)+"DEF";
  document.getElementById("text1").value=c;
}

</script>

<input type="button" value="Paste it" onClick="test()">

What I want is text1 filled with ABC and text2 filled with "DEF"

Thanks you for your helps .....

acdcjunior · Accepted Answer · 2013-08-03 05:38:11Z

3

Splitting is simple:

function test(pastedText) { 
  var parts = pastedText.split(Chr(9));

  document.getElementById("text1").value = parts[0];
  document.getElementById("text2").value =
                                        (parts[1] === undefined ? "" : parts[1]);
}

The tricky part, actually is the pasting, check the full code below.

See a online DEMO for code here.

Text1: <input type="text" id="text1"><br />
Text2: <input type="text" id="text2"><br />
<br />
<div>Sample string (copy the red text and paste it on Text1):</div>
<div style="color:red">ABC  DEF</div>

<script>
    function Chr(AsciiNum) {
      return String.fromCharCode(AsciiNum)
    }

    function test(pastedText) { 
      var parts = pastedText.split(Chr(9));

      document.getElementById("text1").value = parts[0];
      document.getElementById("text2").value = (parts[1] === undefined ?
                                                              "" : parts[1]);
    }

    /** HANDLING PASTE EVENT
     *  Credits to: http://stackoverflow.com/a/6035265/1850609 */
    function handlePaste(e) { 
      var pastedText = undefined;
      if (window.clipboardData && window.clipboardData.getData) { // IE
        pastedText = window.clipboardData.getData('Text');
      } else if (e.clipboardData && e.clipboardData.getData) {
        pastedText = e.clipboardData.getData('text/plain');
      }
      test(pastedText); // Process and handle text...
      return false; // Prevent the default handler from running.
    };
    document.getElementById("text1").onpaste = handlePaste;
</script>

I also suggest you rename the test() function into something more meaningful to you.

answered Aug 3, 2013 at 5:38

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Wibowo Margito Over a year ago

Thanks for the answer. But how if there is no way to access to the source code of the application where we want to paste into it ..

acdcjunior Over a year ago

I dont't get it: what do you want to do, if you can't access the source code? What are you trying to change/achieve?

Wibowo Margito Over a year ago

Thanks acdcjunior, your code above run exactly like what I want, except that the red text should not exist in the same page and, I "my not" modify the code of the page where I should paste into. So it is impossible for me to add any code snippet begind TEXT1 and TEXT2.

Wibowo Margito Over a year ago

There is a web based app, it made by someone else. The app run limited only in my office via Local Area Network and I am not the Admin. The app is intended to collect every persons data in my region. I imagine to make a simple website so that everyone in my region able to fill their own data by accessing the web. Then, I want to copy it and paste into the web based app (belong to the programmer) with a single paste, because there are many columns and fields to be filed. I think, this will save time. Thank you

ya-ivanov · Accepted Answer · 2013-08-03 05:19:25Z

1

Why dont you just do like that:

 c = "ABC "+Chr(9);
 document.getElementById("text1").value=c;
 document.getElementById("text2").value= "DEF";

This should be inside test()

Hope this helps.

answered Aug 3, 2013 at 5:19

ya-ivanov

5162 silver badges11 bronze badges

2 Comments

Wibowo Margito Over a year ago

In my case, there is a web application that I don't have access to the source code at all. So, I try to make my own form that contain inputs similar to the application. And then the oparator just need to copy into clipboard (by single click) and paste into the first field in the web based application and the other field filed automaticaly. Thanks vr much

ya-ivanov Over a year ago

Where are you making this form? Where are you putting the code?

Collectives™ on Stack Overflow

How to split a string into several html text fields

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related