Javascript 无法跟踪输入值的变化

在模板中，我有一个输入元素

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onkeypress='captionUpdate();'>

两个选项都不会被激发！！我不确定我的设置有什么问题，或者Fine Uploader不允许这样做？请参阅我的：

---

有什么办法解决FU的这个问题吗？

您是否尝试过onchange事件？它有用吗

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onchange='captionUpdate();'>

---

您是否尝试过onchange事件？它有用吗

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onchange='captionUpdate();'>

---

这可能会让您开始：

$（'.inp input'）.keyup（函数（）{
如果（this.value.length>0）{
$（this）.closest（'.row'）.find（'.cell.btn button.upload'）.prop（'disabled'，false）；
}否则{
$（this）.closest（'.row'）.find（'.cell.btn button.upload'）.prop（'disabled'，true）；
}
});
*{位置：相对；框大小：边框框；}
.row{溢出：隐藏；}
.cell{float:左；高度：40px；}
.pic{宽度：82px；}
.inp{宽度：230px；}
.inp输入{字体大小：1rem；填充：2px 5px；}
.btn{宽度：60px；}

上传
删除
这可能会让您开始：


$（'.inp input'）.keyup（函数（）{
如果（this.value.length>0）{
$（this）.closest（'.row'）.find（'.cell.btn button.upload'）.prop（'disabled'，false）；
}否则{
$（this）.closest（'.row'）.find（'.cell.btn button.upload'）.prop（'disabled'，true）；
}
});
*{位置：相对；框大小：边框框；}
.row{溢出：隐藏；}
.cell{float:左；高度：40px；}
.pic{宽度：82px；}
.inp{宽度：230px；}
.inp输入{字体大小：1rem；填充：2px 5px；}
.btn{宽度：60px；}

上传
删除
如果您只是简单地将此内联事件处理程序直接添加到模板元素，那么它从未被触发也就不足为奇了。精细的上传器模板非常原始，因为模板被解释为HTML字符串，然后用于在容器元素（引用为的元素）内创建DOM元素

您真的不应该使用内联事件处理程序。这种方法有很多缺点。我在书中更深入地讨论了这一点-。据我所知，在您的案例中，附加事件处理程序的方法根本不是必需的。相反，在构建Fine Uploader的新实例后，只需使用
addEventListener
将您选择的事件处理程序附加到输入元素。例如，如果您的
元素有一个CSS类名“qq编辑标题”，您可以附加一个“更改”事件处理程序，如下所示：

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

…如果要为每个文件创建此输入元素，并且需要将“更改”处理程序附加到所有这些输入元素，则应将单个委托事件处理程序附加到容器元素，并根据最初触发事件的元素作出反应（查看事件的
target
属性）。您可以通过查看
事件.target
的父级
的CSS类来确定文件的ID，也可以在目标元素的父级
上查找“qq文件ID”属性（该值将是文件ID）。该代码可能如下所示：

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

如果您只是将这个内联事件处理程序直接添加到模板元素中，那么它从未被触发就不足为奇了。精细的上传器模板非常原始，因为模板被解释为HTML字符串，然后用于在容器元素（引用为的元素）内创建DOM元素

您真的不应该使用内联事件处理程序。这种方法有很多缺点。我在书中更深入地讨论了这一点-。据我所知，在您的案例中，附加事件处理程序的方法根本不是必需的。相反，在构建Fine Uploader的新实例后，只需使用
addEventListener
将您选择的事件处理程序附加到输入元素。例如，如果您的
元素有一个CSS类名“qq编辑标题”，您可以附加一个“更改”事件处理程序，如下所示：

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

…如果要为每个文件创建此输入元素，并且需要将“更改”处理程序附加到所有这些输入元素，则应将单个委托事件处理程序附加到容器元素，并根据最初触发事件的元素作出反应（查看事件的
target
属性）。您可以通过查看
事件.target
的父级
的CSS类来确定文件的ID，也可以在目标元素的父级
上查找“qq文件ID”属性（该值将是文件ID）。该代码可能如下所示：

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

您可以通过输入值启用和禁用按钮的状态。使用Keyup功能

 $('.qq-edit-caption').keyup(function() {
       if(this.value.length > 0){
            $("#edit").prop('disabled', false);
       }
       else {
        $("#edit").prop('disabled', true);
       }
    });

您可以通过输入值启用和禁用按钮的状态。使用Keyup功能

 $('.qq-edit-caption').keyup(function() {
       if(this.value.length > 0){
            $("#edit").prop('disabled', false);
       }
       else {
        $("#edit").prop('disabled', true);
       }
    });

这不起作用-您必须用双反斜杠转义选择器字符串中的保留字符（如点）。@Gibberish-感谢他用工作代码给出的详细响应。我在项目设置中尝试了同样的方法，但没有起作用，这意味着，“我的本地环境可能有问题，或者可能与文件上载平台/库存在某种冲突。@RayNicholus-您所说的“用双反斜杠转义选择器字符串中的保留字符”是什么意思？例如，如果CSS类包含一个点，您必须在该点前面加上“\\”前缀。所以
find（'.cell.btn button.upload'）
必须表示为
find（'.cell\\.btn button\\.upload'）
这行不通-您必须用双反斜杠转义选择器字符串中的保留字符（如点）。@Gibberish-感谢他用工作代码给出了详细的响应。我在项目设置中尝试了同样的方法，但没有成功，这意味着，我的本地环境可能存在问题，或者可能与文件上载平台/库存在某种冲突。@RayNicholus-你所说的“e”是什么意思