伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化
在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个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上的优化的更多相关文章
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- table设置表格有滚动条
table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...
- div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算
1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...
- css+div table
div+css table表格样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
- 以KeyValue形式构建Lua Table
Key为字符串 -- 定义一个key,value形式的table local kv = {fruit = "apple", bread = "french", ...
- 如何使用css伪类,实现div左上角出现封面等提示信息
HTML <div class="ui-cover-tip”><div> CSS .ui-cover-tip{ position: relative; width: ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- DIV实现水平或垂直滚动条
添加样式: 在html中,需要创建2层div来实现.一个div包含另一个div: 效果:
随机推荐
- ThinkPHP3.2.3多文件上传,文件丢失问题的解决
描述 thinkphp多文件上传时,有些时候会出现文件丢失的情况.比如上传多个图片,最终只上传了一个图片.本地测试的时候是正常的,但上传到服务器上就会出现丢失文件这种情况. 原因 查看tp上传类(Th ...
- Android手机刷recovery
以前觉得android刷机是件很麻烦的事,现在倒不觉得了. 只要手机刷入第三方的recovery,一切都好办了,无论是root还是刷google play. recovery开源的有两大阵营,tw ...
- Google Code Jam 2016 Round 1B B
题意:给出两个数字位数相同,分别中间有若干位不知道,用问号表示.现在要求补全这两个数字,使得差值的绝对值最小,多解则取第一个数字的值最小的,再多解就取第二个数字最小的. 分析: 类似数位dp,但是很多 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- c++队列基本功能
#include<string>#include<assert.h>#include<iostream>typedef int status;#define OK ...
- 重建索引提高SQL Server性能
大多数SQL Server表需要索引来提高数据的访问速度,如果没有索引,SQL Server 要进行表格扫描读取表中的每一个记录才能找到索要的数据.索引可以分为簇索引和非簇索引,簇索引通过重排表中的数 ...
- Ubuntu 12.04 安装 Apache2+PHP5+MySQL
LAMP是Linux web服务器组合套装的缩写,分别是Apache+MySQL+PHP.此教程教大家如何在Ubuntu 12.04 LTS server 上安装Apache2服务器,包括PHP5(m ...
- CentOS7 NTP 安装配置
NTP 网络时间协议用来同步网络上不同主机的系统时间.你管理的所有主机都可以和一个指定的被称为 NTP 服务器的时间服务器同步它们的时间.而另一方面,一个 NTP 服务器会将它的时间和任意公共 NTP ...
- 当攻击者熟读兵法,Camouflage病毒实战演示暗度陈仓之计
"明修栈道,暗度陈仓"的典故许多人都听说过,该典故出自楚汉争霸时期,刘邦意图进入关中,需要攻下关中咽喉之地--陈仓.韩信献出一计:表面上浩浩荡荡地修复通往陈仓的栈道以迷惑陈仓守将, ...
- 【React】组件生命周期
初始化阶段 getDefaultPropos:只调用一次,实力之间共享引用 getInitialState:初始化每个实例特有的状态 componentWillMount:render之前最后一次修改 ...