Можно ли изменить стиль <input> и <textarea> в js

196

15 июля 2017, 09:39

Есть форма, в ней "инпуты", с ними "текстарея", у этих ребят класс .style-animation. Написала пару строчек, чтоб по событиям onfocus и onblur менялся цвет и размер. Как заставить этот код работать?

var stAnm = document.getElementsByClassName('style-animation');
stAnm.addEventListener('focus',onEvent('200px','#fff'));
stAnm.addEventListener('blur',onEvent('100%','rgba(240, 255, 240, 0.65)'));
function onEvent(height,color){
   this.style.height=height;
   this.style.backgroundColor=color;
}

Вроде бы все норм, но не работает. Знаю, что желаемое можно и на ccs задать, однако очень хочется на джс. З.Ы. может проблема кроется в this?

Answer 1

У вас две ошибки в коде:

1) stAnm.addEventListener не будет работать по скольку stAnm массив выбранных элементов с текущим классом, смотрите работу addEventListener

2) this не будет виден в функции callback, его нужно передать явно.

Вот уже рабочий код с исправлением этих ошибок:

<input type="text" name="anim1" value="anim1" class="style-animation" /> 
<input type="text" name="anim2" value="anim2" class="style-animation" /> 
<input type="text" name="anim3" value="anim3" class="style-animation" /> 
<script> 
var stAnm = document.getElementsByClassName('style-animation'); 
 
for(var i=0;i<stAnm.length;i++){ 
    stAnm[i].addEventListener('focus',function(){onEvent(this,'200px','#fff')}); 
    stAnm[i].addEventListener('blur',function(){onEvent(this, '100%','rgba(240, 255, 240, 0.65)')}); 
} 
 
 
 
function onEvent(elem,height,color){ 
   elem.style.height=height; 
   elem.style.backgroundColor=color; 
} 
</script>