dtll2016 2017-11-01 11:30
浏览 125
已采纳

可信的div高度限制

Hey guys I have problems with contenteditable height. With code like this:

 function Preview() {
 var x = document.getElementById("code").value;
 document.getElementById("preview").innerHTML = x;
}
  .preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}
<section id="main"> 
   <div id="gra"> 
      <input type="hidden" id="current-code" name="current-code" />
         <textarea id="code" name="code">
             <!DOCTYPE html>
               <html lang="en">
                  <head>
                    <meta charset="UTF-8">
                    <title>A Simple PHP File</title>
                  </head>
                  <body>
                    <h1><?php echo "Hello, world!"; ?></h1>
                  </body>
               </html> 
             </textarea>
       <div class="flex">
          <a href="#" class="myButton" onclick="Preview()">Preview</a>
         <a href="#" class="myButton" onclick="Reset()">Reset</a>  
       </div>
      </div>
      <div id="gra">
        <div contenteditable="true" class="preview" id="preview">  
      </div>
    </div>
 </section>

When I enter code with more I can observe effect like this: test

Anyone can help me with limit contenteditable height?

</div>
  • 写回答

1条回答 默认 最新

  • dongyanju1094 2017-11-01 11:50
    关注

    try this code

    and also change color: red; instead of color:white because its not see anything on white screen

    function Preview() {
    
      var x = document.getElementById("code").value;
      document.getElementById("preview").innerHTML = x;
    }
    
    function Reset() {
      document.getElementById("preview").innerHTML = "";
    }
    .preview {
      text-align: left;
      color: red;
      margin-left: 10px;
      max-height: 300px;
      overflow-y: scroll;
      border: solid 1px #ddd;
    }
    <section id="main">
      <div id="gra">
        <input type="hidden" id="current-code" name="current-code" />
        <textarea id="code" name="code">
                 <!DOCTYPE html>
                   <html lang="en">
                      <head>
                        <meta charset="UTF-8">
                        <title>A Simple PHP File</title>
                      </head>
                      <body>
                        <h1><?php echo "Hello, world!"; ?>you write php code hear so it will not print on html</h1>
                      </body>
                   </html> 
                 </textarea>
        <div class="flex">
          <a href="#" class="myButton" onclick="Preview()">Preview</a>
          <a href="#" class="myButton" onclick="Reset()">Reset</a>
        </div>
      </div>
      <div id="gra">
        <div contenteditable="true" class="preview" id="preview">
        </div>
      </div>
    </section>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 单片机与嵌入式系统-电子时钟
  • ¥20 unity实习让我做一个程序
  • ¥15 如何查看h3c 5130s-28f-si交换机配置 及更改网口
  • ¥15 HFSS仿真喇叭天线阵列方向图出现异常
  • ¥15 blender自发光强度
  • ¥15 FIR滤波器算法设计与实现(利用库函数firdec()
  • ¥15 利用单片机产生正弦信号,来测量差分放大电路放大倍数和共模放大倍数的思路和仿真
  • ¥60 关于mavlink的论文咨询
  • ¥66 定制开发肯德基自动化网站下单软件
  • ¥15 中科院研发的TextMind(文心)