Question

如何在调整其中的textarea大小时调整div的大小？
如果我创建两个或更多粘性并使用ESC，则所有粘性将被关闭。如何设置ESC以仅关闭活动弹出窗口？
如何在页面刷新时保持活力？

我使用此代码制作弹出式便笺： http://codepen.io/anon/pen/XXNBoz

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
    <script>

        $(document).ready(function(){
         function limitTextareaLine(e) {
                        if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { 
                            return false;
                        }
                    }
                    $(function() {
                      $('textarea.limited').keydown(limitTextareaLine);
                    });      
                    var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";    
                    $('#click').click(function () { 
                        $('#one').append('<div class="note">'+x+'</div>');
                        $( ".darkYellow" ).draggable();
                        $('.close').each(function(){
                            $('.close').click(function() {
                                $(this).parent().remove();
                            });
                        });
                    });
                    $('.darkYellow').live('click', function() {
                      $(this).addClass("index");
                    });
                    $('.darkYellow').live('blur', function() {
                      $(this).removeClass("index");
                    }); 
            $(document).keyup(function(e) {
                if (e.keyCode == 27) { 
                    window.open(location, '_self', '');
                    openedWindow.close();
                }
            });
        });

enter image description here

Answer 1

将固定宽度和高度更改为min-width和min-height，如下所示。

它应该自动调整大小。

*{
  margin:auto;
  padding:0;
 }

.darkYellow {
  position:absolute;
  background-color: #76B5F0;
  min-width:200px;
  min-height:150px;
  font-size:12px;
  text-indent:1px;
  -webkit-box-shadow: 1px 1px 10px #888888;
  cursor:move
    }

.lightYellow {    
  min-width:200px;
  min-height:135px;
  background-color: #8EC0EE;
  margin-top:1px;
}

textarea {  
 background-color: #8EC0EE;     
 border: 0px;  
}

.index {
 z-index: 55;    
}

.close {
 width:7px;
 height:7px;
 padding:0;
 line-height:2pt;
 float:right;
 margin-top:6px;
 margin-right:4px;
 font-size:14px;
 cursor:pointer;
}

还使用了更新的JQuery版本，我已经在下面更新了你。

https://jsfiddle.net/link2twenty/gLrmgqgz/10/

Answer 2

在CSS中设置父div的显示：table应解决问题，并在更改textarea的大小时调整大小。

编辑：至于转义事件（只是刷新并看到了）你可以使用document.activeElement，或者因为你使用的是jQuery，你可以做$（'：focus'）。

编辑：将您的openWindow变量设置为openWindow = $(':focus');，对于您添加的第3项，您必须将活动粘贴保存在页面的本地存储中，并在每次更改粘贴时更新它活跃。以下是localstorage localstorage MDN

的一些信息

Answer 3

您可以使用jQuery的大小调整来捕获resize事件

$("textarea").resizable({
    resize: function() {
       //resize your div
    }
});

对于便签：如何定义变量opensWindow？

用div调整textarea的大小

3 个答案: