Write input to span tag

**mauritsgrootveld** · 11-24-2006, 02:33 PM

Hi,

How can i write the input of an input text field to the page? I would like to write this to the page within a span tag onkeyup. So when the user changes the input field it is changed within the span tag on the page as wel. But the span tag has already been written by an prompt script which prompt for input when the page is loaded.

Code:

<input type="text" size="50" name="text" id="text" maxlength="256" onkeyup="javascript:changeInput(this.value);" />

<td align="center"><SPAN id="tekstlink">
      <script>
document.write(textlink);
</script>
      </SPAN></td>

Can any one please help me?

thnx

**Twey** · 11-24-2006, 05:41 PM

Ugh, that code is hideous.

Code:

<script type="text/javascript">
  function startCopy(inp, elm) {
    var telm;

    for(var i = 0, e = elm.childNodes; i < e.length; ++i)
      if(e[i].nodeType === 3)
        break;
    if(i === e.length)
      telm = elm.appendChild(document.createTextNode(""));
    else telm = e[i];
    textCopy(inp, telm);
  }

  function textCopy(inp, elm) {
    telm.firstChild.nodeValue = inp.value;
    textCopy.thread = window.setTimeout(function(){textCopy(inp, elm);}, 100);
  }

  function stopCopy() {
    if(textCopy.thread)
      window.clearTimeout(textCopy.thread);
    textCopy.thread = null;
  }
</script>

<form name="modform" action="" onsubmit="return false;">
  <p id="tspan">
    <script type="text/javascript">
      document.write(window.prompt("Please enter a value:"));
    </script>
  </p>
  <input type="text" name="tlink" onmousedown="startCopy(this, 'tspan');" onmouseup="stopCopy();">
</form>

**coothead** · 11-24-2006, 05:45 PM

Hi there mauritsgrootveld,

have a look at this example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
table {
    border:2px solid #999;
    margin:10px auto;
 }
td {
    width:200px;
    height:40px;
    border:1px solid #000;
    text-align:center;
 }
-->
</style>

<script type="text/javascript">
<!--
window.onload=function(){
   document.getElementById('text').onkeyup=function() {
   document.getElementById('tekstlink').firstChild.data=this.value;
  }
 }
//-->
</script>

</head>
<body>

<div>
<input type="text" size="50" name="text" id="text" maxlength="256" />
</div>

<table><tr>
<td>
<span id="tekstlink">this is a span</span>
</td>
</tr></table>

</body>
</html>

coothead

**Twey** · 11-24-2006, 06:14 PM

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Hopefully unnecessary -- the server should send this header.

Code:

<style type="text/css">
<!--

Unnecessary -- all the browsers that still need this hack don't support the Host HTTP header, and so have been broken since the adoption of HTTP/1.1. Also, will cause an error in Firefox (contrary to the standard).

Code:

window.onload=function(){

I commend you on trying to keep markup and scripting separate, but if you're going to use window.onload, try to do it in a "nice" way and avoid overwriting any other window.onloads that might be on the page.

Code:

document.getElementById('tekstlink').firstChild.data

You'd better hope that's a text node...

Code:

/>

This XML-like markup is invalid in HTML.

Code:

<table><tr>
<td>
<span id="tekstlink">this is a span</span>
</td>
</tr></table>

What's the point in the one-cell table?

**coothead** · 11-24-2006, 06:28 PM

Hi there Twey;

thank you very much for your input.

coothead

p.s. I see that you are still using document.write().

**Twey** · 11-24-2006, 06:57 PM

Yes

You could be right, actually: having the initial values of the text box and the element match could well be more user-friendly. We could use setInterval instead of setTimeout as well, and use a non-breaking space if the textbox doesn't contain anything.

Code:

<script type="text/javascript">
  function startCopy(inp, elm) {
    var telm;

    if(typeof elm === "string")
      elm = document.getElementById("elm");

    for(var i = 0, e = elm.childNodes; i < e.length; ++i)
      if(e[i].nodeType === 3)
        break;
    if(i === e.length)
      telm = elm.appendChild(document.createTextNode(inp.value));
    else
      telm = e[i];
    textCopy.copying = true;
    textCopy.thread = window.setInterval(function(){textCopy(inp, telm);}, 100);
  }

  function textCopy(inp, elm) {
    if(inp.value.length > 0)
      elm.nodeValue = inp.value;
    else
      elm.nodeValue = String.fromCharCode(160);
    if(!textCopy.copying  && textCopy.thread) {
      window.clearInterval(textCopy.thread);
      textCopy.thread = null;
    }
  }

  function stopCopy() {
    textCopy.copying = false;
  }

  window.oldonload = window.onload;
  window.onload = function() {
    var el, tel;

    if(typeof window.oldonload === "function")
      window.oldonload();
    (el = document.forms['modform'].elements['tlink']).value = window.prompt("Enter a default value:");
    startCopy(el, tel = document.getElementById("tspan"));
    stopCopy();
    el.onkeydown = function() {
      startCopy(this, tel);
    }
  };
</script>

<form name="modform" action="" onsubmit="return false;">
  <p id="tspan">&nbsp;</p>
  <input type="text" name="tlink">
</form>

Thread: Write input to span tag

Thread Tools

Search Thread

Write input to span tag

Bookmarks

Bookmarks

Posting Permissions