|
input="text" с автошириной
Не могу сообразить как сделать чтобы при вводе текста ширина у input="text" увеличивалась и уменьшалась исходя из объема текста в поле.
Иными словами чтобы ширина должна подгоняться вплотную к ширине введенного текста. |
Тут недавно рассматривался такой пример... Но для точнсти (хоть какой-то) - нужно использовать моноширный шрифт.
|
Была такая тема. Но вообще, как-то так:
<style>
#inp {
font-family: monospace;
font-size: 16px;
}
</style>
<input id="inp" />
<script>
el= document.getElementById("inp");
el.onkeydown=el.onkeyup=el.onchange=el.onkeypress= function(){
this.style.width= this.value.length*12 + "px";
};
</script>
|
ksa, вот кстати нет. Использовал моноширинный - всё равно подглючивает.
|
trikadin,
да, этого мне вполне хватит, думал может есть что-то чего не знал ... :) |
Цитата:
|
Бивас, тест!
<!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">
input {
width: 10px;
font-family: 'Courier New';
font-size: 12pt;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var a=['click','keyup','select','focus']
$(a).each(function(i){
$('input').bind(a[i],function(){
var i=this.value.length;
i=(i==0)? 1: i;
$(this).css('width',i*10+'px');
});
});
});
</script>
</head>
<body>
<input type='text' />
</body>
</html>
Вроде чётко работает... :) |
можно в скрытом Диве дублировать строку из Инпута
и синхронизировать размеры, в этом случае не обязательно моноширный шрифт
<!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">
input, #hideEl {
font-family: 'Times';
font-size: 12pt;
}
input {
width: 10px;
}
#hideEl {
position: absolute;
top: -9999px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var $hideEl = $('<div id="hideEl">'),
$input = $('input'),
a=['click', 'keyup', 'select', 'focus'];
$hideEl.appendTo(document.body);
$(a).each(function(i, v){
$input.bind(v, function () {
$hideEl.text(this.value);
$input.width($hideEl.width() + 10);
});
});
});
</script>
</head>
<body>
<input type='text' />
</body>
</html>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 05:46. |
|