在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建一个尚可的文本块。

  但这样的文本块存在许多的问题,最为严重的是textarea内部只允许纯文本,并不能识别html标签(较新的ie浏览器可识别标签,但包括chrome在内的主流浏览器不能识别),所以,一些特定的格式无法很好表达。并且,在一些版本的ie浏览器上,当设置disabled="disabled"后,滚动条也将被禁用,影响文本的正常阅读。参考了一些主流的做法,感觉比较可行的是div+table的布局方案。示例代码如下:

 <div id="div_get" style="width:700px;overflow:scroll;height:400px;overflow-x:hidden">
<table id="tb_get" style="width:700px;" >
</table>
</div>

  首先创建一个div,设置这个层的长与宽,设置overflow:scroll,表示当层中的内容大于层所设置的大小后,启用滚动条进行拓展,overflow-x:hidden为禁用纵向的滚条,这里只是为了美观目的。创建层后,通过向层内添加html,一定程度上已经完成了Textatea关于实现不可编辑文本块的功能。但为了方便布局,以及从数据库中抓取数据用AJAX填入,我又用到了table,在这里我只是设置了表格的宽度。在pc端的主流浏览器中一切正常,但放到iphone的safari测试时,发现滚动条并不是停在预期的位置,而是卡在某处,通过对浏览器中的scrollHeight的比较,iphone上的长度会长于其他浏览器,走了各种弯路后发现,需要设置table的长度,可以有效防止滚动条的位置超出预期。至于长度,建议与对应层的长度相同。
  

  由于需要,当AJAX放入内容,需要将滚动条定位到最下方,可以通过以下js实现:

    document.getElementById("id").scrollTop = document.getElementById("id").scrollHeight;

    这里的id是div的,注意不是table的

  考虑到,当用户阅读内容,如果AJAX刷新,直接将滚动条移到最下方,十分不友好,于是乎,加一判断条件document.getElementById("id").scrollTop == 0,仅当滚动条在最上方时执行此操作(刷新完滚动条一般在最上处,而用户阅读时,滚动条移位,则不触发这项操作)。

伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化的更多相关文章

  1. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  2. table设置表格有滚动条

    table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...

  3. div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算

    1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...

  4. css+div table

    div+css table表格样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. 用伪类实现一个div的宽度和高度是固定百分比

    遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...

  6. 以KeyValue形式构建Lua Table

    Key为字符串 -- 定义一个key,value形式的table local kv = {fruit = "apple", bread = "french", ...

  7. 如何使用css伪类,实现div左上角出现封面等提示信息

     HTML <div class="ui-cover-tip”><div> CSS .ui-cover-tip{ position: relative; width: ...

  8. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  9. DIV实现水平或垂直滚动条

    添加样式: 在html中,需要创建2层div来实现.一个div包含另一个div: 效果:

随机推荐

  1. jquery easyui datagrid翻页后再查询始终从第一页开始

    在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...

  2. 下载时,经常看见ASC、MD5、SHA1等,是干什么的呢?

    一 进行文件一致性校验 为了确保你得到的文件是正确的版本,而没有被注入病毒和木马程序.例如我们经常在网上下载软件,而这些软件已经被注入了一些广告和病毒等,如果不进行文件与原始发布商的一致性校验的话,可 ...

  3. MySQL 锁问题

    一.MySQL中不同的存储引擎支持不同的锁机制 (A) MyISAM 和 MEMORY 支持表级锁 (B) BDB 支持页面锁,也支持表级锁 (C) InnoDB 支持行级锁,也支持表级锁,默认是行级 ...

  4. SQL SERVER 2008 获取表字段的类型

    SELECT * FROM ( select a.name TABLENAME,b.name FIELDNAME,c.name FIELDTYPE,c.length FIELDLENGTH from ...

  5. 【日记】thinkphp项目阿里云ECS服务器部署

    项目本地开发告一段落.准备上传到服务器上测试 技术组成 thinkphp+mysql+阿里ECS  代码管理方式git 一.阿里ECS服务器配置 1.因为线上已经有几个站点了.所以要配置ngnix多站 ...

  6. 搭建Android开发环境附图详解+模拟器安装(JDK+Eclipse+SDK+ADT)

    ——搭建android开发环境的方式有多种,比如:JDK+Eclipse+SDK+ADT或者JDK+Eclipse+捆绑好的AndroidSDK或者Android Studio. Google 决定将 ...

  7. javaSE基础03

    javaSE基础03 生活中常见的进制:十进制(0-9).星期(七进制(0-6)).时间(十二进制(0-11)).二十四进制(0-23) 进制之间的转换: 十进制转为二进制: 将十进制除以2,直到商为 ...

  8. Easyui columns列图片移位问题!!!

    InitGrid: function () { $("#list").datagrid({ toolbar: '#tb', url: BanZhengXiaoLuSearch.Aj ...

  9. 建表and新增删除数据A

    SELECT*FROM 表名:查询表 新建数据库: select 文件名(可以很多被查询的文件名)from 文件名 创建student表  CREATE TABLE `student`  ( `id` ...

  10. java常见的问题

    1.   接口与抽象类的区别? 抽象类:含有abstract修饰的class即为抽象类abstract类不能创建实例对象,不能有抽象的构造方法或抽象的静态方法,如果子类没有实现抽象父类中的所有 方法, ...