Javascript / Jquery .html() 只替换一次

Question

嗨，我正在尝试实现以下目标：

1）用户单击文件输入按钮，文本字段被替换为文件名

2）用户更改文本字段的值，文件内容被删除。

这工作正常。但是，如果用户执行 1） 在他执行 2） 之后，这些值不再显示在文本字段中。

这是在带有咖啡脚本的骨干上。

events:
    'change #soundfile': 'soundReceived'
    'change #soundtrack': 'linkInput'

soundReceived: (event) ->
  $('#soundtrack').html($('#soundfile').val().replace("C:\fakepath\", ''))
  @
linkInput:(event) ->
  match = $('#soundtrack').val().match('http://')
  if match
    $('#soundfile').replaceWith($("#soundfile").clone());
    console.log($('#soundfile').val())
  else
    console.log($('#soundfile').val())
    $('#soundtrack').html($('#soundfile').val().replace("C:\fakepath\", ''))
    @

编辑

<div id = "create_form" > 
    <form class="new_plot" name="create_form" id ="new_plot"  data-remote="true" enctype="multipart/form-data">

    <div id = "sound_gen">
      <span>
      <textarea class="input" id="soundtrack" name="name" rows="1"  onClick="if(this.value == 'Soundtrack: upload mp3 file') { this.value = ''; }">Soundtrack: upload mp3 file</textarea> 
      </span>
          <img id = "btn_upload" src ="/assets/upload_icon.png"></img>
          <input name="soundtrack" type="file" id ="soundfile"/>
      <span class ="generate">
      <input class="blue_button btn_generate" name="commit" type="submit" value="create" id ="plot_subm"/>
      </span>
  </div>
    </form>

  </div>

Answer 1

您应该

使用 val 来更改表单元素的值，而不是html ，例如：

soundReceived: (event) ->
  $('#soundtrack').val($('#soundfile').val().replace("C:\fakepath\", ''))
  @

尝试通过脚本更改<input type="file">的值通常是没有意义的（希望出于显而易见的原因），但如果您愿意，可以尝试使用.val(...)。

精简演示：http://jsfiddle.net/ambiguous/5n6aZ/

此外，您可能应该在<textarea>中使用 placeholder 属性而不是onClick处理程序。

Answer 2

这一行：

$('#soundtrack').html($('#soundfile').val().replace("C:\fakepath\", ''))

应该是这样的：

$('#soundtrack').html($('#soundfile').val(''))

所以真的是两个问题：

1. 允许发送到文件输入的唯一值是空字符串
2. $.val()接受单个参数作为值，但它不像属性那样设置

希望这有帮助！