当文本框扩展时,文本框背景不会跟随

时间:2015-08-04 21:07:54

标签: jquery html css

我已经为我的文本框应用了一个背景,当我添加.resizeable()jQuery时它工作正常。但是当文本框由于用户编写更多单词/字符而扩展时,背景不会随文本框扩展。忽略不是问题的主要注释类。

JS

$(function() {
     $(".note").resizable();
     $(".main-note" || ".note").draggable();
     $(".main-note-editable" || ".note").on("mousedown", function(e) {
          e.stopPropagation();
          return;
     });
});

HTML

<div class="note" contenteditable="true">
     <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
          <img height="30" src="images/close.png" width="30">
     </span>

     <div class="note" contenteditable="true">
          <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
               <img height="30" src="images/close.png" width="30">
          </span>
     </div>
</div>

CSS

.note {    
    width: 280px;
    height: 130px;
    padding-top: 20px;
    margin-top: 60px;
    margin-left: 25px;
    padding: 2;
    word-break: break-word;
    font-family: Note;
    font-size: 20px;
    background-image: url("images/stickynote.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}

1 个答案:

答案 0 :(得分:0)

这对我有用:

$(".note").keyup(function(){
    $(this).css('height' , '100%');
});

HTML:

 <div class="note" contenteditable="true"> <span contenteditable='false' id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
            <img src="http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete.png" height="30" width="30"/></span>
</div>

Here is the JSFiddle demo