Member Avatar for mithesh

Hi All,
I want to display the string captured by using onkeypress event now my problem is i am able to display the string in the text box but i want to display it using <span> or <div> as a string i am attaching the code also :

<html>
 <head>
  <title>Key Events Example</title>
   <script type="text/javascript">
    function handleEvent()
    {
     var FirstTextbox = event.srcElement;
     var SecondTextbox = document.getElementById("txt2");
     SecondTextbox.value = FirstTextbox.value;    

    }
    var SecondTextbox = event.srcElement;
  </script>
 </head>
 <body>
 <p>Type some characters into the first textbox.</p>
 <p>
  <input type="textfield" id="txt1"
  onkeydown="handleEvent()"
  onkeyup="handleEvent()"
  onkeypress="handleEvent()" ></input></p>
   <p><textarea id="txt2" rows="15" cols="50"></textarea></p>

  </body>
</html>
Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 2 Replies
  • 80 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for hielo

Building on what you already have, you would just need to add the desired <span> or <div>, assign it an id, an update that <span> or <div> based on its id value. I have used txt3 on the code below on a <p> tag instead:

<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(e)
{
	e = e || window.event;
	var FirstTextbox = e.srcElement || e.which;
	var SecondTextbox = document.getElementById("txt2");
	SecondTextbox.value = FirstTextbox.value;
	//this makes a copy of input on txt3, regardless of tag name
	document.getElementById("txt3").innerHTML =FirstTextbox.value; 
}

</script>
</head>
<body>
<p>Type some characters into the first textbox.</p>
<p>
<input type="textfield" id="txt1"
onkeydown="handleEvent()"
onkeyup="handleEvent()"
onkeypress="handleEvent()" ></input></p>
<p><textarea id="txt2" rows="15" cols="50"></textarea></p>
<p id="txt3"></p>
</body>
</html>
Member Avatar for ~s.o.s~

> Building on what you already have
> onkeydown="handleEvent() Too many problems with the snippet you posted. First of all, Firefox expects you to pass the event object when invoking the event listener. It should be onkeydown="handleEvent(event) > var FirstTextbox = e.srcElement || e.which; This doesn't make any sense. e.which gives you the code of the key pressed while e.srcElement gives the element on which the event was fired. It should be var FirstTextbox = e.srcElement || e.target; so that the snippet works in both Firefox and IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.