Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Постоянное изменение размера (https://javascript.ru/forum/events/76583-postoyannoe-izmenenie-razmera.html)

Alehana 24.01.2019 10:05

Постоянное изменение размера
 
Надо, чтобы размер инпута менялся в зависимости от размеров его div-a. div - динамический и зависит от размеров окна.
Пробовал прописать
window.resize=win();

где win - функция, приравнивающая длину инпута к длине дива. Но при из менении размеа окна инпут отстается прежним. Как это сделать ?

Nexus 24.01.2019 10:09

https://jsfiddle.net/c2wjmuxp/3/
<div class="field-wrapper" id="target">
	<input type="text" class="full-width"/>
</div>
<div>
	<input type="range" min="0" step="1" max="100" value="100" id="control">
</div>
<style>
*{
	box-sizing:border-box;
}
.field-wrapper{
	padding:10px;
	background:#EEE;
}
.full-width{
	display:block;
	width:100%;
	padding:10px 20px;
}</style>
<script>
var target=document.querySelector('#target');
document.querySelector('#control').addEventListener('input',function(){
	target.style.width=this.value+'%';
});
</script>

Dilettante_Pro 24.01.2019 10:28

Цитата:

Сообщение от Alehana
Пробовал прописать
window.resize=win();

Событие - resize, назначение обработчика события - onresize.
В назначении обработчика указывается не запуск функции, а ссылка на нее.
соответственно, нужно
window.onresize=win;

Читайте Введение в браузерные события

Alehana 24.01.2019 10:44

window.onresize=win();
window.onload=win();


не помогает. Вначале срабатывает дважды, как будто сработало событие при запускеб а помом - всё. Менял размер браузера - ничего не происходит.

Dilettante_Pro 24.01.2019 10:59

Alehana,
Внимательно прочитайте пост 7 и документацию по ссылке в посте

j0hnik 24.01.2019 19:45

Alehana,
Почему размер инпута через css не задать в процентах???


Часовой пояс GMT +3, время: 11:07.