|
Сообщение от tarya
|
|
Как такое реализовать?
|
На этом форуме предлагался примерно такой вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
#calc {
position: absolute;
top: 0;
left: 0;
border: 1px solid;
font-family: Tahoma;
font-size: 12pt;
}
.box {
width: 10px;
border: 1px solid red;
}
.box input {
width: 100%;
border: 0;
font-family: Tahoma;
font-size: 12pt;
}
</style>
<script type="text/javascript">
function Go() {
var val,ot=document.getElementById('txt');
val=ot.value;
var oc=document.getElementById('calc');
oc.innerHTML=val;
ot.parentNode.style.width=oc.offsetWidth+'px';
}
</script>
</head>
<body>
<form>
<div class='container'>
<div id='calc'></div>
<div class='box'>
<input type='text' id='txt' onkeyup='Go()' />
</div>
</div>
</form>
</body>
</html>