contentEditable keyup 上的启用/禁用按钮

Question

我的网站上有几个使用 HTML5 contentEditable 属性的 div。目标是让用户能够开始编写日记条目，并将保存按钮从禁用更改为启用。

这是我目前拥有的 HTML：

<div id="entry-create-partial">
  <div id="title-create-partial" name="title" contenteditable="true" data-placeholder='Title it' style="color:black"></div>
  <div id="content-create-partial" name="content" contenteditable="true" style="color:gray">Write anything</div>
  <button type="button" id="create-entry" class="btn" disabled="true">Save</button>
</div>

这里是 jQuery：

$(document).ready(function(){
    $('#title-create-partial').keyup(function(){
        if ($(this).value == '') {
            $('#create-entry').attr('disabled', 'disabled');
        } else {
            $('#create-entry').attr('disabled', false);
        }
    });
});

虽然这确实有效，但它只检查第一个键；如果用户退格并删除他们键入的所有内容，则该按钮不会再次禁用自身。有谁知道为什么？

Answer 1

这是一个<div> 元素而不是<input>，因此请使用text() 而不是val()（并确保修剪，以免在空白处启用它）。也可以使用prop() 来设置属性，而不是attr()。

$('#title-create-partial').keyup(function(){
    if ($.trim($(this).text()) === '') {
        $('#create-entry').prop('disabled', true);
    } else {
        $('#create-entry').prop('disabled', false);
    }
});

jsFiddle here.