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

score 3 · Answer 1 · answered Aug 03 '13 at 05:38

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.

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 .. — Wibowo Margito, Aug 03 '13 at 05:42
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? — acdcjunior, Aug 03 '13 at 05:44
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, Aug 03 '13 at 21:48
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 — Wibowo Margito, Aug 03 '13 at 22:07

score 1 · Answer 2 · answered Aug 03 '13 at 05:19

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 03 '13 at 05:19

ya-ivanov

516
2
11

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 – Wibowo Margito Aug 03 '13 at 05:34
Where are you making this form? Where are you putting the code? – ya-ivanov Aug 03 '13 at 05:42

How to split a string into several html text fields

2 Answers2