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.

在contentEditable keyup上启用/禁用按钮

1 个答案: