【问题标题】:Internet Explorer 10, auto resize textareaInternet Explorer 10,自动调整文本区域大小
【发布时间】:2013-05-16 09:39:17
【问题描述】:

这似乎是一个已经被回答了一千次的问题,但我发现的解决方案既不适用于 Internet Explorer 10,也不适用于 Windows-phone 8(对我来说更重要的是)。

我的一般问题如下:我正在编写一个 Windows-Phone-8、C# 应用程序,用户应该在其中编辑大量文本。 由于每个 UIElement 限制为 2048 像素,我不能使用 TextBox。 所以我想让用户在 Webbrowser 控件中编辑 textarea 中的文本。 为此,textarea 必须根据输入/删除的文本调整大小。

我尝试了这些线程中的每个答案:

但我没有让它在 Internet Explorer 10 中工作。

如果我以前从未使用过 html 和 JavaScript,我将不胜感激任何可以正常工作的 html,或者让用户编辑大量文本的其他解决方案。

【问题讨论】:

    标签: html windows-phone-8 textarea


    【解决方案1】:

    我不确定这是否适合你,但试试 jQuery Autosize:http://www.jacklmoore.com/autosize/ (.) 我不确定你是否可以在你的应用程序中使用它,但我之前在我的应用程序中使用过它自己的项目,发现效果很好。

    【讨论】:

      【解决方案2】:

      超轻量:

      有没有人认为 contenteditable?滚动不会乱七八糟,我唯一喜欢它的 JS 是如果您打算将数据保存在模糊上……显然,它在所有流行的浏览器上都兼容:http://caniuse.com/#feat=contenteditable

      只需将其设置为看起来像一个文本框,它会自动调整大小...使其最小高度和行高成为首选文本高度并拥有它。

      这种方法的好处在于您可以在某些浏览器上保存和标记。

      http://jsfiddle.net/gbutiri/v31o8xfo/

      <style>
      .autoheight {
          min-height: 16px;
          font-size: 16px;
          margin: 0;
          padding: 10px;
          font-family: Arial;
          line-height: 16px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          overflow: hidden;
          resize: none;
          border: 1px solid #ccc;
          outline: none;
          width: 200px;
      }
      </style>
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script>
      $(document).on('blur','.autoheight',function(e) {
          var $this = $(this);
          // The text is here. Do whatever you want with it.
          console.log($this.html());
      });
      
      </script>
      <div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>
      

      【讨论】:

      • 我发现如果您正在克隆文本区域(例如,以始终可用的“下一个' 场地)。 CONTENTEDITABLE,尽管它很漂亮,但有它自己的一组问题:例如,使用 div(如上面的示例,它会生成 html,例如
        用于新行并将每一行包装在嵌套的 div 中。你不能在表单中使用它,因为(我猜)它未被识别为输入字段(并且您仍然拥有所有嵌套的 html)。
      猜你喜欢
      • 1970-01-01
      • 2023-03-17
      • 1970-01-01
      • 2019-08-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多