javascript - textarea autoresize 有问题

Question

我的 textarea autoresize 有问题，这是正确的，但 textarea 内容有问题。我有 CSS 代码:

<style type="text/css">
    textarea {
        width:400px;
        border: 0 none white;
        overflow: hidden;
        padding: 0;
        outline: none;
        background-color: #fff;
        resize: none;
    }
    </style>

JavaScript 代码:

<script type="text/javascript">
    var observe;
    if (window.attachEvent) {
        observe = function (element, event, handler) {
            element.attachEvent('on'+event, handler);
        };
    }
    else {
        observe = function (element, event, handler) {
            element.addEventListener(event, handler, false);
        };
    }
    function init () {
        var text = document.getElementById('text');
        function resize () {
            text.style.height = 'auto';
            text.style.height = text.scrollHeight+'px';
        }
        /* 0-timeout to get the already changed text */
        function delayedResize () {
            window.setTimeout(resize, 0);
        }
        observe(text, 'change',  resize);
        observe(text, 'cut',     delayedResize);
        observe(text, 'paste',   delayedResize);
        observe(text, 'drop',    delayedResize);
        observe(text, 'keydown', delayedResize);

        text.focus();
        text.select();
        resize();
    }
    </script>

在我的 html 代码中:

<textarea rows="1" style="height:1em;" id="text">
  <p>
    blablabla
  </p>
</textarea> 

结果在这里: http://www.tokobesi.co.id/beta/resize.jpg

我不想要 html 标签 <p> </p>也显示，帮帮我

Answer 1

$(document).ready(function() {

   var value = $("#text").val();
   var v1 = value.replace("<p>", "");
   v1 = (v1.replace("</p>", '').trim());

   $("#text").val(v1);
 });
 var observe;
 if (window.attachEvent) {
   observe = function(element, event, handler) {
     element.attachEvent('on' + event, handler);
   };
 } else {
   observe = function(element, event, handler) {
     element.addEventListener(event, handler, false);
   };
 }

 function init() {
   var text = document.getElementById('text');

   function resize() {
       text.style.height = 'auto';
       text.style.height = text.scrollHeight + 'px';
     }
     /* 0-timeout to get the already changed text */

   function delayedResize() {
     window.setTimeout(resize, 0);
   }
   observe(text, 'change', resize);
   observe(text, 'cut', delayedResize);
   observe(text, 'paste', delayedResize);
   observe(text, 'drop', delayedResize);
   observe(text, 'keydown', delayedResize);

   text.focus();
   text.select();
   resize();
 }

textarea {
   width: 400px;
   border: 1px solid #000;
   overflow: hidden;
   padding: 0;
   outline: none;
   background-color: #fff;
   resize:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<textarea rows="1" style="height:1em;" id="text">
  <p>
    blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
  </p>
</textarea>