How to copy the content of a form field into a DIV as it is being typed

JavaScript
1

Hello,

We need a JavaScript function that will Copy the content of an input field as being typed into the target DIV.
This copying needs to be letter by letter in real time, so as a letter is added on the source input field this letter needs to be added at same time to the target DIV and vis versa if a letter is removed it needs to be removed from target DIV.

So the the JS function should take 2 values, that is the Source input field ID and the Target DIV ID and copy the contents as is being typed from the Source to the Target.

Can you please suggest a JS function that does this?

And just to be sure, will the call look like this:

Thanks,
Dean

2

Hi there. :grin:

You mean something like this?

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input id="source" type="text" oninput="copyData('source', 'target')"  />
    <div id="target"></div>
    <script type="text/javascript">
      function copyData(sourceId, targetId) {
        var data = document.getElementById(sourceId).value;
        document.getElementById(targetId).innerHTML = data;
      }
  </script>
  </body>
</html>

EDIT:

Changed onkeydown to oninput. That works even better and has support down to IE8.

3

It’s even better too when the JavaScript is not mixed in with the HTML, achieving a beneficial separation of concerns.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input id="source" type="text"/>
    <div id="target"></div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js

function copyData(sourceId, targetId) {
    var source = document.getElementById(sourceId);
    document.getElementById(targetId).innerHTML = source.value;
}
document.getElementById('source').oninput(function () {
    copyData('source', 'target');
}
5

Sunik,

Yes, that is doing the Job perfectly,
As you can see here:
https://www.anoox.com/polls/create_poll.php

6

Paul,

Yes, I already separated the JS Code from the HTML, since such separation is indeed Key to creating good Code.

7

[quote=“WorldNews, post:5, topic:205689, full:true”]
Yes, that is doing the Job perfectly,[/quote]

Taking things further, we can protect the global namespace by placing the code in an immediately invoked function expession (IIFE), and have the desired target attached to the source event via closure, with:

(function () {
    function copyToTarget(target) {
        return function copyDataHandler(evt) {
            evt = evt || event;
            var source = evt.target || srcElement; // target here being the source element of the event
            target.innerHTML = source.value;
        };
    }
    var source = document.getElementById('source');
    source.oninput = copyToTarget(document.getElementById('target'));
    // and other fields can now be copied elsewhere too, if need be.
}());

It is a bit over the top in this particular case, but it’s a handy technique that can help to get you out of a lot of jams later on.

8

Paiul,

Yes, That is good point too.
But actually have a lil question with that Poll creation page listed above.
When we click on the option to not display Poll Results that button is dissapears from the display which is good.
But when one clicks on the option to display the Result button then when it displays again then it is not on the same line as the "Submit My Vote: button, do you know how to fix this?
I have included the style=“display: inline;” for both sans, but still when the Result button appears again it is not inline.
You know how to fix this?

Thanks,

9

[quote=“WorldNews, post:8, topic:205689, full:true”]You know how to fix this?[quote]
[/quote]

##Solution 1

Yes, you’ve made it a block. Don’t make it a block. Just make it an empty string instead, which allows it to use the default style for that element.

document.getElementById(item).style.display = '';

##Solution 2
A better solution is to apply a CSS class to the element, so that you can affect the element by setting and removing a class style.

hidden: {
    display: none;
}

document.getElementById(item).className = '';
...
document.getElementById(item).className = 'hidden';

##Solution 3
Even better these days is to use classList, so that you can use:

document.getElementById(item).classList.remove('hidden');
...
document.getElementById(item).classList.add('hidden');

But classList requires a shim to make it work on older IE browsers down to version 8, which can be found at https://developer.mozilla.org/en/docs/Web/API/Element/classList

10

Hey Paul,

Thanks for this intel.
But I think I will go with an easier solution.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.