Du kan prøve denne her, der er skrevet lidt om:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
background-color: buttonface;
}
#promtCont {
position: relative;
width: 600px;
height: 500px;
margin: 40px;
border: 2px inset threedhighlight;
overflow-x: hidden;
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
font-family: courier;
font-size: 14px;
font-weight: bold;
color: #c0c0c0;
background-color: black;
}
#promtCont .spacer {
height: 12px;
}
#promtCont textarea {
padding: 0;
border: 0 none;
overflow: hidden;
vertical-align: top;
font-family: courier;
font-size: 14px;
font-weight: bold;
color: #c0c0c0;
background-color: transparent;
}
</style>
<script type="text/JavaScript">
/**************************************************
************* JsPromtObject **************
Creates a simulated Command-Promt in DHTML
(c) Copyright: Ole Clausen - 2005
******************************************
Public Methods:
promt(txt (String))
- Promts the user.
answerResponse(txt (String))
- Writes an answer to user.
Typically called from a callback-function
when the onrespond-event is fired
Events:
onrespond(resp (String))
- Fires when user press Return.
Returns the users response as a string.
**************************************************/
function JsPromtObject(id, templ) {
this._cont = document.getElementById(id);
this._templCont = document.getElementById(templ);
this._lastLine = null;
this._inp = null;
}
var _p = JsPromtObject.prototype;
_p.promt = function(txt) {
var tx, me = this;
this._lastLine = this._templCont.getElementsByTagName("div")[0].cloneNode(true);
tx = document.createTextNode(txt);
this._lastLine.firstChild.appendChild(tx);
this._cont.appendChild(this._lastLine);
this._inp = this._lastLine.getElementsByTagName("textarea")[0];
this._inp.style.width = (this._lastLine.offsetWidth - this._inp.parentNode.previousSibling.offsetWidth) + "px";
this._inp.onkeydown = function(e){me._checkKey(e?e:event)};
this._inp.onkeyup = function(e){me._checkHeight()};
this._inp.focus();
}
_p.answerResponse = function(txt) {
var tx, dv = document.createElement("div");
dv.className = "answer";
tx = document.createTextNode(txt);
dv.appendChild(tx);
this._cont.appendChild(dv);
}
_p.spacer = function() {
var tx, dv = document.createElement("div");
dv.className = "spacer";
tx = document.createTextNode("\40");
dv.appendChild(tx);
this._cont.appendChild(dv);
}
_p._checkKey = function(e) {
if (e.keyCode==13) {
var val, sp, tx, me=this;
val = this._inp.value;
sp = this._inp.parentNode;
sp.removeChild(this._inp);
tx = document.createTextNode(val);
sp.appendChild(tx);
if (this.onrespond) setTimeout(function(){me.onrespond(val)},10);
}
if (this._inp.scrollHeight>parseInt(this._inp.style.height)) this._inp.style.height = this._inp.scrollHeight + 40 + "px";
}
_p._checkHeight = function() {
if (this._inp.scrollHeight>parseInt(this._inp.style.height)) this._inp.style.height = this._inp.scrollHeight + 40 + "px";
} // JsPromtObject - END
/* Callback functions - START */
function actOnDaShit(resp) {
oPromt.answerResponse("You response '"+resp+"' was valid");
oPromt.answerResponse("Linie 2");
oPromt.answerResponse("Linie 3");
setTimeout("finishDaShit('"+resp+"')", 2000);
}
function finishDaShit(resp) {
oPromt.answerResponse("Linie 4 om "+resp);
oPromt.spacer();
oPromt.promt("Write something else>");
}
/* Callback functions - END */
var oPromt = null;
window.onload = function() {
oPromt = new JsPromtObject("promtCont", "templates");
oPromt.onrespond = actOnDaShit;
oPromt.promt("Write something>");
}
</script>
</head>
<body>
<div id="promtCont"></div>
<div id="templates" style="display:none">
<div><span></span><span><textarea style="height:60px"></textarea></span></div>
</div>
</body>
</html>
Jeg er klar over, det ikke virker i Opera - men den er zq for syg til, jeg gider at rode med den lige nu :)
