360浏览器中blur事件异常；及textarea实现自适应高度

Question

360浏览器中blur事件失去焦点但仍能输入内容。。。。chrome和ff都正常

Answer 1

p元素模拟的输入框在360浏览器上blur后，没有焦点仍然能输入内容，很奇怪，看样子只是隐藏了focus的样式，功能仍旧开启着，最后没办法，只能用自带的contenteditable属性模拟blur事件

$('.pinglun-type .pinglun-msg, .huifu-input').on('keypress',function (){
        var len = $(this).text().trim().length;
        if(len<=100){
            $(this).attr('contenteditable',true); 
        } else{
             $(this).text($(this).text().substr(0,100));
             $(this).attr('contenteditable',false); 
        }
    })
    $('.pinglun-type .pinglun-msg, .huifu-input').on('click',function(){
        $(this).attr('contenteditable',true).focus();
    })

题外话
上述原因根本在与模拟textarea实现高度的自适应，使用的p元素，兼容性的根本原因并未找到解决办法，但此解决办法问题在与不能自动获得焦点，体验上有瑕疵，
后再后台的一再强迫下改用textarea实现了自适应高度，具体代码如下：

.wrap-text{
    height: 24px;
    position: relative;
}
.input {
    padding-left:5px;
    width: 100%;
    height: 100%;
    resize: none;
    font-size: 14px;
    line-height:22px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-all; 
    position: absolute;
    top:0;
    left: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-family: miscrosoftYaHei;
    outline: none;
    border:none;
}
.hide {
    min-height: 24px;
    height: auto;
    visibility: hidden;
}

<div class='wrap-text pinglun-msg' id='wraptext'>
    <pre class=" hide input" id="pre"></pre>
    <textarea class="input" id="textarea" maxlength="100" placeholder="输入最大限制100字符"></textarea>
</div>

$('textarea').on('input',function(){
    $(this).parent().find('pre').text($(this).val());
    var h = $(this).parent().find('pre').height()
    $(this).parent().css({
        'height': h
    })
})

思路完全借鉴的先人的，具体就是将textarea的高度设置成起父元素的高度，并且通过input事件实时的将textarea中内容同步到pre标签中，并将父元素的高度设置成pre元素的高度，其中pre设置成visibility: hidden;textarea宽高100%；其中需要注意的是pre和textarea中字体大小行高等必须完全一致（部分css文件可能将pre或textarea设置另类样式），才能做到完美镜像pre的高度哦