textarea autoresize 有问题答案

【问题标题】：textarea autoresize has something wrongtextarea autoresize 有问题
【发布时间】：2015-03-31 04:27:08
【问题描述】：

我的 textarea 自动调整大小有问题，这是正确的，但 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>，帮帮我

【问题讨论】：

删除 <p> </p> 之间的任何内容 <textarea></textarea> 它被视为文本
但是自动总是存在
因为我们从内容管理系统中的 WYSIG 编辑器输入
这些数据会被存储吗？如果是这种情况，则无需担心它将文本格式化为段落。所见即所得编辑器有 2 个选项编辑，就像您在 word 中编辑或编辑 html 一样。我猜你的所见即所得编辑器显示编辑 html 选项
我明白了...但是我怎么能在所见即所得编辑器的文本区域中丢失
呢？我很困惑帮助我:'(

标签： javascript php css ajax

【解决方案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>

【讨论】：