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>
|
Цитата:
|
Цитата:
|
Цитата:
|
ну спрячь например ниже другого объекта используя z-index;
или display: none - только здесь надо тестировать как будет ширина меняться у скрытого элемента в разных обозревателях; или visibility: hidden - только место с умом найди для этого элемента; или opacity: 0 |
Pavel M.,
эти решения однобокие,прочтите рекомендации вебмастеру гугла или яндекса. вы своими 2 мя строками запорете сайт для поисковиков на пару лет. |
Если вы про скрытый объект, то он вроде же создавался после загрузки страницы, input вроде как обычный.
Или все поисковики уже при индексации сначала весь JS выполняют, а потом индексируют. |
Цитата:
|
и еще вопрос
вы что в своих скриптах никогда не применяете, display: none; или opacity: .. ?? |
Цитата:
По поводу скрытых элементов в рекомендациях чётко говорят,а вот про удаление/ создание элемента ни слова в рекомендациях. |
Цитата:
|
Kolyaj,
сейчас глянул -изменили чуть правила-раньше было что то на манер: использование скрытых элементов,сливающегося с фоном текста приводит к использованию фильтров/бана сейчас: –Не рекомендуется использовать элементы оформления, делающие неочевидным доступ к тексту для пользователей – окна прокрутки, скрытые выпадающие блоки и т.п. И не слова про скрытые и не читаемые...фильтры и бан. Хотя и яндекс на каждом углу не пишет что есть фильтры- 50,100,песочница и бан. Из под фильтров 50-100 народ говорит что не могут выйти годами,иногда даже полная смена контента и продажа домена не влияют на срок выхода. Хотя тоже что подразумевается под не рекомендуется))? законы предусмотренные УК тоже не рекомендуется нарушать)) |
Бан следует за скрытие текста, предназначенного для поисковиков, а не для пользователей. Да и то, там очень тонкие границы.
|
Цитата:
Вот именно ,что граница тонкая очень(( |
Следуя вашей логике, поисковики должны забанить большую часть интернета. Не надо читать сеошные форумы на ночь, там слишком много мифов.
|
Цитата:
|
Цитата:
яркий последний пример -редирект скриптом и гугл |
Как бы вы не бдели, от ошибок алгоритма не защититься.
|
Цитата:
|
Цитата:
|
ksa,
это про поисковые системы, которых dmitriymar боится. |
Цитата:
А их нужно бояться? :blink: |
Цитата:
|
вполне логично ,что как только смогут начнут искать подмену контента с помощью скрипта,и лучше сейчас пытаться избежать того что они могут посчитать подменой изза тех же ошибок алгоритмов.
|
Цитата:
Цитата:
Цитата:
Цитата:
Да я трижды подумаю использовать ли такое! :D Да и заказчику расскажу чего ему будет стоить такое желание как "при этом еще использовать не моноширный шрифт"... И только если ему будет пофиг на это - таки что-то применю. |
tenshi в предыдущей теме же уже подсказал человеческий вариант.
div с contentEditable="true" и всё. <div contentEditable="true" style="border:1px solid #000;padding:0 5px;height:25px;line-height:25px;float:left"></div> |
Цитата:
И как еще надежно узнать реальную длину строки символов, кроме как создать скрытый html элемент? Моноширный шрифт тоже не выход - пользователь может увеличить шрифт, уменьшить, может не быть у него нужного шрифта в системе. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Главное тема раскрыта полностью! :D
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:59. |