2016-06-24 2 views
0

Привет I`m с использованием jscolor выбора цвета из http://jscolor.com/ Мне нужно создать новые входы динамически, пример с сайтаjscolor набор OnChange функции для новых входов

function add() { 
    for(var i = 0; i < 100; i++) { 
     var input = document.createElement('INPUT') 
     var picker = new jscolor(input) 
     picker.fromHSV(360/100 * i, 100, 100) 
    document.getElementById('container').appendChild(input) 
    } 
} 

вопрос заключается в том, чтобы установить OnChange функции правильно и сделать jscolor для передачи своего объекта с информацией о цвете. Теперь я могу установить его только для статических элементов, как в Exemple

<input class="jscolor" onchange="update(this.jscolor)" value="cc66ff"> 
<p id="rect" style="border:1px solid gray; width:161px; height:100px;"> 
<script> 
function update(jscolor) { 
// 'jscolor' instance can be used as a string 
document.getElementById('rect').style.backgroundColor = '#' + jscolor 
} 
</script> 

Вот мой код не работает

var input = document.createElement('INPUT'); 
input.setAttribute("class", "jscolor"); 
input.setAttribute("onchange", "getColor(this)"); 
var picker = new jscolor(input); 
... //And then I add this input to parent and picker shows 

но OnChange не срабатывает.

+0

вы пытаетесь изменить значение TextField и обновления TextField цвет ... или коробку ниже, чем текстовой? –

+0

Мне нужно, чтобы jscolor передавал свои цветовые данные для работы. –

ответ

0

Я искал то же самое и сделал это wokr, используя следующий код. Надеюсь это поможет!

var input = document.createElement('INPUT'); 
 
var picker = new jscolor(input, { 
 
    value: "00ff00" 
 
}); 
 

 
input.addEventListener('change', function(e){ 
 
    var color = e.target.value; 
 

 
    console.log(color); 
 
});

Смежные вопросы