DIV普遍每日任务(下) —变身为编写器及div的各种

日期:2021-03-21 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

自从HTML5中新引进了contentEditalbe特性之后,div就与textarea1样,能够做为最常见的编写器应用。
1.开启div做为编写器
让div进到编写情况很简易,只必须:

拷贝编码
编码以下:

div.contentEditable=true;

这样便可以进到编写情况。自然你立即在html中设定contenteditable也是能够的。
总的来讲,完成可视性化编写,可使用contentEditable和designMode两种方式。contentEditable一开始在IE上完成,后来各大访问器陆续适用contentEditable,HTML5规范也包括contentEditable。designMode只能把document总体改为可编写情况,但contentEditable能够把任何HTML元素改为可编写情况,运用范畴比designMode广,用 contentEditable是未来的发展趋势。
contentEditable与draggable有时是矛盾的,当contentEditalbe=true时,1般要将draggable(假如有的话)设为false,不然不可以编写。
2.编写div內容的情况下,适用回车确定改动
这个完成很简易,恶性事件回调函数中分辨1下event的键值便可以了:

拷贝编码
编码以下:

htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}

3.分辨是不是按下Shift+Enter,按下则换行
这个完成道理同上,较为简易:

拷贝编码
编码以下:

if(event.shiftKey && event.keyCode==13) {
return;
}

这个是在Chrome上的完成,无需做任何解决,立即return回到便可。在FireFox中必须这样加上<br>来完成换行:

拷贝编码
编码以下:

if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}

4.编写div內容的情况下,严禁换行
这里看与內容编写超过后怎样解决有关的几个CSS特性:

拷贝编码
编码以下:

width: 80px; ----这行限定了div的宽度。
text-overflow:clip; ---多出的文字不换行也不省略。(这行假如设定成ellipsis则外溢时显示信息省略标识(...))
white-space:nowrap; -----强制性文字在1行内显示信息
overflow:hidden; ------------------将外溢文字掩藏
word-wrap: break-word;------设定全自动换行

一般设定前面2个便可以做到实际效果,假如有1些别的的要求,能够再加后边的几个特性。
5.去掉编写时的div周边的聚焦点框
在CSS中设定outline:none;或设定outline:0;便可。
6.Div进到编写情况后选定全部的文字
这个应用selection目标的modify(alter, direction, granularity)方式能够完成。该方式用于更改聚焦点的部位,或拓展、变小selection的尺寸。应用这个方式的能够完成多种多样全选,挪动聚焦点等实际操作。下面是各个主要参数的含意:
alter:更改的方法。”move”,用于挪动聚焦点;”extend”,用于更改selection。
direction:挪动的方位。可选值forward | backword或left | right。
granularity:挪动的企业或规格。可选值,character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1之后的版本号才会适用此涵数, 官方文本文档:https://developer.mozilla.org/en/DOM/Selection/modify。
下面的事例是当div进到编写情况后,选定全部文字:

拷贝编码
编码以下:

if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}

遗憾的是FireFox的完成不适用"sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary"主要参数。必须改动1下思路,用line主要参数完成:

拷贝编码
编码以下:

var isFireFox = function() {
var ua = navigator.userAgent.toLowerCase();
return !!ua.match(/firefox\/([\d.]+)/);
};
if (isFireFox()) {
var count = htmlElement.innerHTML.split('
').length;
for (var i = 0; i < count; i++) {
sel.modify('extend', 'right', 'line');
}
}

7. 设定div的翻转条全自动滚到最终的部位
这里要用到div的几个有效的特性:scrollTop、scrollLeft、scrollWidth、scrollHeight。先看下面的完成示例:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf⑻" />
<meta name="keywords" content="翻转条, scrollbar, 网页页面底部, 闲聊对话框, " />
<meta name="description" content="一些情况下(如开发设计闲聊程序流程),大家必须将将翻转条(scrollbar)维持在最底部,例如闲聊对话框,全新传出和收到的信息内容要显示信息在最正下方,假如要看到最正下方的內容,就务必确保翻转条维持在最底部。"/>
<title>将翻转条(scrollbar)维持在最底部的方式 - 翻转条, scrollbar, 网页页面底部, 闲聊对话框, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">将翻转条(scrollbar)维持在最底部的方式</h3>
<div id="example_main">
<!--************************************* 案例编码刚开始 *************************************-->
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">请点一下“插进1行”按钮,插进全新信息内容,当出現翻转条时,翻转条将全自动维持在底部。</span>

<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;"></div>
<input type="button" value="插进1行" onclick="add();">
<!--************************************* 案例编码完毕 *************************************-->
</div>
</div>
</body>
</html>

翻转到最下面便是设定div.scrollTop = div.scrollHeight;便可。scrollHeight是內部元素的肯定宽度,包括內部元素的掩藏的一部分。scrollLeft 也是相近道理,翻转到最右侧的话便是设定div.scrollLeft = div.scrollWidth;便可。
另外,融合div的offsetHeight,offsetLeft等本身有关衡量特性,能够很便捷开展翻转条部位的操纵。
8.div键入框高宽比自融入
高宽比自融入的意思是说:伴随着键入的行数愈来愈多,键入框会愈来愈高,当到1定高宽比后再出現竖直的翻转条。
做为多写作本域作用来说,textarea考虑了大家绝大多数的要求。但是,textarea有1个不够便是不可以像一般div标识1样高宽比能够追随內容自融入。textarea一直高宽比固定不动的。有时,以便提升互动体验想让文字域高宽比自融入的情况下,就会遇到不便。自然,你還是能够根据应用JS来操纵高宽比,完成自融入。具体上,这里大家便可以应用div去仿真模拟这样的实际效果。下面是来自网友的1个完成:
HTML编码:

拷贝编码
编码以下:

<div class="testbox" contenteditable="true"></div>

对应的CSS编码:

拷贝编码
编码以下:

.testbox {
width: 400px;
min-height: 120px;
max-height: 300px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
}

实际上许多的完成都来源于于在网上,这里对众多网友表明诚挚的谢谢!这里的许多难题也是有许多其他完成方法,这里還是激励大伙儿积极主动思索,把相应的专业知识变为自身的物品!