Changing input's value based on another input's value

问题

Let's say for example I have this code:

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

Now I've setupped some css to change the default input file button's look, And now the question is, How do i change .uploadarea's value depending on the value of #file when I select a file?

I currently have this code but I don't know what to do next.

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

回答1:

Add an onchange handler to handle the change event on the file event :

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

You need to add the id attribute for this to work

回答2:

Yes. Use onchange. And by the way read alternate to onchange event in <input type='file' />. There are some problems with JS manipulation after file select.

回答3:

Simple jQuery code:

$('#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
}

来源：https://stackoverflow.com/questions/9311968/changing-inputs-value-based-on-another-inputs-value