Изменение значения входа на основе значения другого входа

Question

Скажем, например, у меня есть этот код:

<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>

Теперь я настроил некоторые css, чтобы изменить внешний вид кнопки входного файла по умолчанию, и теперь вопрос в том, как мне изменить значение .uploadarea в зависимости от значения #file при выборе файла?

У меня сейчас есть этот код, но я не знаю, что делать дальше.

var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];

Answer 1

Добавить обработчик onchange для обработки события change в событии файла:

<input type="file" id="file" name="" onchange="something(this.value)">
<input id="somethinghere" class="uploadarea">
<span class="button">Browse</span>

function something(val) {
    document.getElementById('somethinghere').value = val;
}

Вам нужно добавить атрибут id, чтобы это работало

Answer 2

Да. Используйте onchange. И, кстати, прочитайте чередуя событие onchange в . Есть некоторые проблемы с манипулированием JS после выбора файла.

Answer 3

Простой jQuery код:

$('#file').change(function(){
    $('.uploadarea').val(this.value);
});

pure Javascript :

<input type="file" id="file" onchange="foo()" />
<input class="uploadarea" id="other" />

function foo(){
    document.getElementById('other').value = this.value
}