PDA

View Full Version : 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.


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

<!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
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Hopefully unnecessary -- the server should send this header.
<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).
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.
document.getElementById('tekstlink').firstChild.dataYou'd better hope that's a text node... :p
/>This XML-like markup is invalid in HTML.
<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(). :D

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