javascript - Enable/disable button on contentEditable keyup -

i have couple of divs on website utilize html5 contenteditable attribute. goal user able start writing journal entry, , have save button change disabled enabled.

here's html have far:

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

and here's jquery:

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

while work, checks on first keyup; if user backspaces , deletes typed, button doesn't disable again. know why?

it's <div> element not <input>, use text() instead of val() (and sure trim isn't enabled on whitespace). use prop() set property instead of attr().

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

jsfiddle here.