input="text" с автошириной [Архив форума]

greatilya

09.11.2011, 15:41

Не могу сообразить как сделать чтобы при вводе текста ширина у input="text" увеличивалась и уменьшалась исходя из объема текста в поле.
Иными словами чтобы ширина должна подгоняться вплотную к ширине введенного текста.

ksa

09.11.2011, 15:55

Тут недавно рассматривался такой пример... Но для точнсти (хоть какой-то) - нужно использовать моноширный шрифт.

trikadin

09.11.2011, 16:02

Была такая тема. Но вообще, как-то так:

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

trikadin

09.11.2011, 16:02

ksa, вот кстати нет. Использовал моноширинный - всё равно подглючивает.

greatilya

09.11.2011, 16:08

trikadin,
да, этого мне вполне хватит, думал может есть что-то чего не знал ... :)

ksa

09.11.2011, 16:12

Использовал моноширинный - всё равно подглючивает.
Инпуты не так просты! :D

ksa

09.11.2011, 16:18

Бивас, тест!

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

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

Вроде чётко работает... :)

Pavel M.

09.11.2011, 17:27

можно в скрытом Диве дублировать строку из Инпута
и синхронизировать размеры,

в этом случае не обязательно моноширный шрифт

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

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

ksa

10.11.2011, 08:51

position: absolute;
top: -9999px;

Неее, такое мне не нравится... :no:

Pavel M.

10.11.2011, 10:26

Неее, такое мне не нравится... :no:

Это просто один из надежных способов скрыть элемент и сделать чтобы он менял ширину при добавлении контента, можно использовать другие.

ksa

10.11.2011, 10:46

можно использовать другие.
Какие например? :)

Pavel M.

10.11.2011, 11:06

dmitriymar

10.11.2011, 11:13

Pavel M.,
эти решения однобокие,прочтите рекомендации вебмастеру гугла или яндекса. вы своими 2 мя строками запорете сайт для поисковиков на пару лет.

Pavel M.

10.11.2011, 11:38

Если вы про скрытый объект, то он вроде же создавался после загрузки страницы, input вроде как обычный.

Или все поисковики уже при индексации сначала весь JS выполняют, а потом индексируют.

dmitriymar

10.11.2011, 11:49

Или все поисковики уже при индексации сначала весь JS выполняют, а потом индексируют.
нет, но уже частично идентифицируют.редиректы точно,ну а что мешает искать соответствие скрытию?

Pavel M.

10.11.2011, 11:53

и еще вопрос

вы что в своих скриптах никогда не применяете, display: none; или opacity: ..

??

dmitriymar

10.11.2011, 12:01

вы что в своих скриптах никогда не применяете, display: none;
На сайтах по возможности нет -если можно обойтись.Тем более нужно учитывать пользователей с отключенным скриптом.
По поводу скрытых элементов в рекомендациях чётко говорят,а вот про удаление/ создание элемента ни слова в рекомендациях.

Kolyaj

10.11.2011, 12:13

вы своими 2 мя строками запорете сайт для поисковиков на пару лет.
Вы какой-то бред несёте. За что, простите, сайт забанят?

dmitriymar

10.11.2011, 12:24

Kolyaj,
сейчас глянул -изменили чуть правила-раньше было что то на манер:
использование скрытых элементов,сливающегося с фоном текста приводит к использованию фильтров/бана
сейчас:
–Не рекомендуется использовать элементы оформления, делающие неочевидным доступ к тексту для пользователей – окна прокрутки, скрытые выпадающие блоки и т.п.

И не слова про скрытые и не читаемые...фильтры и бан.
Хотя и яндекс на каждом углу не пишет что есть фильтры- 50,100,песочница и бан.
Из под фильтров 50-100 народ говорит что не могут выйти годами,иногда даже полная смена контента и продажа домена не влияют на срок выхода.
Хотя тоже что подразумевается под не рекомендуется))?
законы предусмотренные УК тоже не рекомендуется нарушать))

Kolyaj

10.11.2011, 12:29

Бан следует за скрытие текста, предназначенного для поисковиков, а не для пользователей. Да и то, там очень тонкие границы.

dmitriymar

10.11.2011, 12:34

Бан следует за скрытие текста, предназначенного для поисковиков,
дак не ясно,что они посчитают текстом для поисковиков-когда скрипт научится разбирать. Гугл уже банит за редирект на уровне скрипта-хотя раньше этого не делал -пока не научился скрипт читать.Что помешает иза текст скрываемый с помощью скрипта(наложением элементов) начать банить?лучше учесть это чем потом удивляться бану...
Вот именно ,что граница тонкая очень((

Kolyaj

10.11.2011, 12:39

Следуя вашей логике, поисковики должны забанить большую часть интернета. Не надо читать сеошные форумы на ночь, там слишком много мифов.

Pavel M.

10.11.2011, 12:39

дак не ясно,что они посчитают текстом для поисковиков-когда скрипт научится разбирать. Гугл уже банит за редирект на уровне скрипта-хотя раньше этого не делал -пока не научился скрипт читать.Что помешает иза текст скрываемый с помощью скрипта(наложением элементов) начать банить?лучше учесть это чем потом удивляться бану...
Вот именно ,что граница тонкая очень((

тогда лучше вообще JS не применять а то забанят :-)

dmitriymar

10.11.2011, 12:45

Следуя вашей логике, поисковики должны забанить большую часть интернета. Не надо читать сеошные форумы на ночь, там слишком много мифов.

насчёт мифов это ясно,что они там разводят свои теории не имея в своей основной массе фундамента знаний. Но алгоритмы как и человек не совершенны-недавний пример-запустили новый алгоритм и из индекса выпало много сайтов. На вопросы почему, Яндекс ответил ,что это ошибка алгоритма и сайты вернутся через месяц. там где возможно лучше переборщить чем недоучесть...
яркий последний пример -редирект скриптом и гугл

Kolyaj

10.11.2011, 13:26

Как бы вы не бдели, от ошибок алгоритма не защититься.

ksa

10.11.2011, 13:41

ну спрячь например ниже другого объекта используя z-index;
или display: none - только здесь надо тестировать как будет ширина меняться у скрытого элемента в разных обозревателях;
или visibility: hidden - только место с умом найди для этого элемента;
или opacity: 0
Ты сначала проверь все те "приёмы"... :D Это раз... В во вторых, ты считаешь это всё нормальными "решениями"? :blink:

ksa

10.11.2011, 13:41

от ошибок алгоритма не защититься
А тут вообще не понял... :(

Kolyaj

10.11.2011, 13:45

ksa,
это про поисковые системы, которых dmitriymar боится.

ksa

10.11.2011, 13:47

это про поисковые системы
ааа... :)
А их нужно бояться? :blink:

Pavel M.

10.11.2011, 14:02

Ты сначала проверь все те "приёмы"... :D Это раз... В во вторых, ты считаешь это всё нормальными "решениями"? :blink:

ладно про поисковики, там много неясного, а здесь то что не так?

dmitriymar

10.11.2011, 14:03

вполне логично ,что как только смогут начнут искать подмену контента с помощью скрипта,и лучше сейчас пытаться избежать того что они могут посчитать подменой изза тех же ошибок алгоритмов.

ksa

10.11.2011, 14:14

а здесь то что не так?
display: none - только здесь надо тестировать как будет ширина меняться у скрытого элемента в разных обозревателях;
Ширина просто 0
visibility: hidden - только место с умом найди для этого элемента;
Ну нет у меня места... :D
opacity: 0
Так же нужно думать, куда его запихнуть...

Да я трижды подумаю использовать ли такое! :D Да и заказчику расскажу чего ему будет стоить такое желание как "при этом еще использовать не моноширный шрифт"...
И только если ему будет пофиг на это - таки что-то применю.

Aetae

10.11.2011, 14:28

tenshi в предыдущей теме же уже подсказал человеческий вариант.
div с contentEditable="true" и всё.
<div contentEditable="true" style="border:1px solid #000;padding:0 5px;height:25px;line-height:25px;float:left"></div>

Pavel M.

10.11.2011, 14:31

Да я трижды подумаю использовать ли такое! :D Да и заказчику расскажу чего ему будет стоить такое желание как "при этом еще использовать не моноширный шрифт"...
И только если ему будет пофиг на это - таки что-то применю.

Думаю заказчик вообще не поймет о чем ты ему будешь говорить, заказчику нужен результат.

И как еще надежно узнать реальную длину строки символов, кроме как создать скрытый html элемент?

Моноширный шрифт тоже не выход - пользователь может увеличить шрифт, уменьшить, может не быть у него нужного шрифта в системе.

Pavel M.

10.11.2011, 14:35

tenshi в предыдущей теме же уже подсказал человеческий вариант.
div с contentEditable="true" и всё.

этого тоже Заказчик может испугаться :)

ksa

10.11.2011, 14:38

Думаю заказчик вообще не поймет о чем ты ему будешь говорить, заказчику нужен результат.
Это уже его дело... :D Зато меня потом не обвинят в говнокоде...

dmitriymar

10.11.2011, 14:44

div с contentEditable="true" и всё.
на планшетниках редактируемые контейнеры не работают

trikadin

10.11.2011, 14:57

может не быть у него нужного шрифта в системе.
А ещё у него может быть JS отключён... Причём это - вероятнее. Вряд ли кто-то станет целенаправленно удалять все моноширинные шрифты.

ksa

10.11.2011, 14:59

Главное тема раскрыта полностью! :D

tenshi

12.11.2011, 12:48

на планшетниках редактируемые контейнеры не работают

это что за планшеты такие древние?

dmitriymar

12.11.2011, 13:24

это что за планшеты такие древние?
(вообщето эт не от плашета от браузера в первую очередь зависит)
у меня,и не только у меня под андроид 2.2 при таче на ред контейнере-ничего не происходит-ни клава не появляется,ни конт не показывает что он редактируемый