zoukankan      html  css  js  c++  java
  • div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示

    1.highlight.js使用

    js中:<script src="js/highlight/highlight.pack.js"></script>

      <script type="text/javascript">

        hljs.initHighlightingOnLoad();//SQL高亮显示

        $(document).ready(function() {

          $("pre code").each(function(i, block) {

            hljs.highlightBlock(block);

          });

        });

      </script>

    html中:<pre> <code class="lang-javascript"> 内容</code> </pre>

    2.highlight.js应用于<textarea>无效,因而用 div模拟文本框textarea

    无效示例:<pre>

           <code>

              <textarea id="sql" rows="14" cols="80" name="sqlStatement">

                <s:property value="udq.sqlStatement"/>

              </textarea>
                            </code>

         </pre>

    有效div模拟文本框:<div id="sql"  contenteditable placeholder="请输入文字">

               <pre>

                <code>

                  <s:property value="udq.sqlStatement"/>

                </code>

               </pre>
                              </div>

    对于<pre><code>中的内容不随div的宽度换行问题,应用css样式:

      white-space: pre-wrap;
      word-wrap: break-word;

    其中:介绍下HTML5里contenteditable属性:(参考https://w3c.github.io/editing/contentEditable.html#contenteditable

    它主要的属性值有:

    1. contenteditable="inherit"  
    2. contenteditable=""  
    3. contenteditable="events"  
    4. contenteditable="caret"  
    5. contenteditable="typing"  
    6. contenteditable="plaintext-only"  
    7. contenteditable="true"  
    8. contenteditable="false"  

    其实在模拟文本框时,常用的就是"plaintext-only"、"true","plaintext-only"可以实现可以让编辑区域只能键入纯文本

    其实css中有一个属性(user-modify)也能实现让元素内只能输入纯文本,但是由于目前好像只有webkit内核支持(-webkit-),所以效果没上面好

  • 相关阅读:
    JWT有这么难嘛?
    Mybatis一级缓存和二级缓存区别
    redis学习笔记
    基于Redission框架实现redis 分布式锁
    C# lambda 学习笔记
    C# 读取 ttf字体文件里的 Unicode
    网页调试控制台Preview乱码,但是正常显示
    uniapp 自定义组件 列表视图不更新问题
    asp.net core 允许跨域
    asp.net core asp-controller不生效
  • 原文地址:https://www.cnblogs.com/limeiky/p/7381625.html
Copyright © 2011-2022 走看看