DIV常見任務(wù)(下) —變身為編輯器及div的各種diy應(yīng)用
發(fā)布時(shí)間:2013-01-31 09:28:00 作者:佚名
我要評(píng)論

自從HTML5中新引入了contentEditalbe屬性以后,div就與textarea一樣,可以作為最常用的編輯器使用,有編輯器用豈不是更好省我們?cè)谥苄胩炝?,感興趣的朋友可以了解本文,或許對(duì)你學(xué)習(xí)與鞏固知識(shí)有所幫助嘍,閑話不說,進(jìn)主題
自從HTML5中新引入了contentEditalbe屬性以后,div就與textarea一樣,可以作為最常用的編輯器使用。
1.啟用div作為編輯器
讓div進(jìn)入編輯狀態(tài)很簡(jiǎn)單,只需要:
div.contentEditable=true;
這樣就可以進(jìn)入編輯狀態(tài)。當(dāng)然你直接在html中設(shè)置contenteditable也是可以的。
總的來說,實(shí)現(xiàn)可視化編輯,可以使用contentEditable和designMode兩種方法。contentEditable剛開始在IE上實(shí)現(xiàn),后來各大瀏覽器陸續(xù)支持contentEditable,HTML5標(biāo)準(zhǔn)也包含contentEditable。designMode只能把document整體改成可編輯狀態(tài),但contentEditable可以把任何HTML元素改成可編輯狀態(tài),應(yīng)用范圍比designMode廣,用 contentEditable是將來的趨勢(shì)。
contentEditable與draggable有時(shí)是沖突的,當(dāng)contentEditalbe=true時(shí),一般要將draggable(如果有的話)設(shè)為false,否則不能編輯。
2.編輯div內(nèi)容的時(shí)候,支持回車確認(rèn)修改:
這個(gè)實(shí)現(xiàn)很簡(jiǎn)單,事件回調(diào)中判斷一下event的鍵值就可以了:
htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}
3.判斷是否按下Shift+Enter,按下則換行
這個(gè)實(shí)現(xiàn)道理同上,比較簡(jiǎn)單:
if(event.shiftKey && event.keyCode==13) {
return;
}
這個(gè)是在Chrome上的實(shí)現(xiàn),不用做任何處理,直接return返回即可。在FireFox中需要這樣添加<br>來實(shí)現(xiàn)換行:
if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}
4.編輯div內(nèi)容的時(shí)候,禁止換行
這里看與內(nèi)容編輯超出后如何處理相關(guān)的幾個(gè)CSS屬性:
width: 80px; ----這行限制了div的寬度。
text-overflow:clip; ---多出的文本不換行也不省略。(這行如果設(shè)置成ellipsis則溢出時(shí)顯示省略標(biāo)記(...))
white-space:nowrap; -----強(qiáng)制文本在一行內(nèi)顯示
overflow:hidden; ------------------將溢出文本隱藏
word-wrap: break-word;------設(shè)置自動(dòng)換行
通常設(shè)置前面2個(gè)就可以達(dá)到效果,如果有一些其他的需求,可以加上后面的幾個(gè)屬性。
5.去掉編輯時(shí)的div周圍的焦點(diǎn)框
在CSS中設(shè)置outline:none;或者設(shè)置outline:0;即可。
6.Div進(jìn)入編輯狀態(tài)后選中所有的文本
這個(gè)使用selection對(duì)象的modify(alter, direction, granularity)方法可以實(shí)現(xiàn)。該方法用于改變焦點(diǎn)的位置,或擴(kuò)展、縮小selection的大小。使用這個(gè)方法的可以實(shí)現(xiàn)多種全選,移動(dòng)焦點(diǎn)等操作。下面是各個(gè)參數(shù)的含義:
alter:改變的方式。”move”,用于移動(dòng)焦點(diǎn);”extend”,用于改變selection。
direction:移動(dòng)的方向??蛇x值forward | backword或left | right。
granularity:移動(dòng)的單位或尺寸??蛇x值,character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1以后的版本才會(huì)支持此函數(shù), 官方文檔:https://developer.mozilla.org/en/DOM/Selection/modify。
下面的例子是當(dāng)div進(jìn)入編輯狀態(tài)后,選中所有文本:
if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}
遺憾的是FireFox的實(shí)現(xiàn)不支持"sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary"參數(shù)。需要修改一下思路,用line參數(shù)實(shí)現(xiàn):
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. 設(shè)置div的滾動(dòng)條自動(dòng)滾到最后的位置
這里要用到div的幾個(gè)有用的屬性:scrollTop、scrollLeft、scrollWidth、scrollHeight。先看下面的實(shí)現(xiàn)示例:
<!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-8" />
<meta name="keywords" content="滾動(dòng)條, scrollbar, 頁面底部, 聊天窗口, " />
<meta name="description" content="有些時(shí)候(如開發(fā)聊天程序),我們需要將將滾動(dòng)條(scrollbar)保持在最底部,比如聊天窗口,最新發(fā)出和收到的信息要顯示在最下方,如果要看到最下方的內(nèi)容,就必須保證滾動(dòng)條保持在最底部。"/>
<title>將滾動(dòng)條(scrollbar)保持在最底部的方法 - 滾動(dòng)條, scrollbar, 頁面底部, 聊天窗口, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">將滾動(dòng)條(scrollbar)保持在最底部的方法</h3>
<div id="example_main">
<!--************************************* 實(shí)例代碼開始 *************************************-->
<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">請(qǐng)點(diǎn)擊“插入一行”按鈕,插入最新信息,當(dāng)出現(xiàn)滾動(dòng)條時(shí),滾動(dòng)條將自動(dòng)保持在底部。</span>
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;"></div>
<input type="button" value="插入一行" onclick="add();">
<!--************************************* 實(shí)例代碼結(jié)束 *************************************-->
</div>
</div>
</body>
</html>
滾動(dòng)到最下面就是設(shè)置div.scrollTop = div.scrollHeight;即可。scrollHeight是內(nèi)部元素的絕對(duì)寬度,包含內(nèi)部元素的隱藏的部分。scrollLeft 也是類似道理,滾動(dòng)到最右邊的話就是設(shè)置div.scrollLeft = div.scrollWidth;即可。
此外,結(jié)合div的offsetHeight,offsetLeft等自身相關(guān)度量屬性,可以很方便進(jìn)行滾動(dòng)條位置的控制。
8.div輸入框高度自適應(yīng)
高度自適應(yīng)的意思是說:隨著輸入的行數(shù)越來越多,輸入框會(huì)越來越高,當(dāng)?shù)揭欢ǜ叨群笤俪霈F(xiàn)垂直的滾動(dòng)條。
作為多行文本域功能來講,textarea滿足了我們大部分的需求。然而,textarea有一個(gè)不足就是不能像普通div標(biāo)簽一樣高度可以跟隨內(nèi)容自適應(yīng)。textarea總是高度固定的。有時(shí)候,為了增加交互體驗(yàn)想讓文本域高度自適應(yīng)的時(shí)候,就會(huì)遇到麻煩。當(dāng)然,你還是可以通過使用JS來控制高度,實(shí)現(xiàn)自適應(yīng)。實(shí)際上,這里我們就可以使用div去模擬這樣的效果。下面是來自網(wǎng)友的一個(gè)實(shí)現(xiàn):
HTML代碼:
<div class="testbox" contenteditable="true"></div>
對(duì)應(yīng)的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;
}
其實(shí)很多的實(shí)現(xiàn)都來源于網(wǎng)上,這里對(duì)廣大網(wǎng)友表示真摯的感謝!這里的很多問題也有很多別的實(shí)現(xiàn)方式,這里還是鼓勵(lì)大家積極思考,把相應(yīng)的知識(shí)變成自己的東西!
1.啟用div作為編輯器
讓div進(jìn)入編輯狀態(tài)很簡(jiǎn)單,只需要:
復(fù)制代碼
代碼如下:div.contentEditable=true;
這樣就可以進(jìn)入編輯狀態(tài)。當(dāng)然你直接在html中設(shè)置contenteditable也是可以的。
總的來說,實(shí)現(xiàn)可視化編輯,可以使用contentEditable和designMode兩種方法。contentEditable剛開始在IE上實(shí)現(xiàn),后來各大瀏覽器陸續(xù)支持contentEditable,HTML5標(biāo)準(zhǔn)也包含contentEditable。designMode只能把document整體改成可編輯狀態(tài),但contentEditable可以把任何HTML元素改成可編輯狀態(tài),應(yīng)用范圍比designMode廣,用 contentEditable是將來的趨勢(shì)。
contentEditable與draggable有時(shí)是沖突的,當(dāng)contentEditalbe=true時(shí),一般要將draggable(如果有的話)設(shè)為false,否則不能編輯。
2.編輯div內(nèi)容的時(shí)候,支持回車確認(rèn)修改:
這個(gè)實(shí)現(xiàn)很簡(jiǎn)單,事件回調(diào)中判斷一下event的鍵值就可以了:
復(fù)制代碼
代碼如下:htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}
3.判斷是否按下Shift+Enter,按下則換行
這個(gè)實(shí)現(xiàn)道理同上,比較簡(jiǎn)單:
復(fù)制代碼
代碼如下:if(event.shiftKey && event.keyCode==13) {
return;
}
這個(gè)是在Chrome上的實(shí)現(xiàn),不用做任何處理,直接return返回即可。在FireFox中需要這樣添加<br>來實(shí)現(xiàn)換行:
復(fù)制代碼
代碼如下:if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}
4.編輯div內(nèi)容的時(shí)候,禁止換行
這里看與內(nèi)容編輯超出后如何處理相關(guān)的幾個(gè)CSS屬性:
復(fù)制代碼
代碼如下:width: 80px; ----這行限制了div的寬度。
text-overflow:clip; ---多出的文本不換行也不省略。(這行如果設(shè)置成ellipsis則溢出時(shí)顯示省略標(biāo)記(...))
white-space:nowrap; -----強(qiáng)制文本在一行內(nèi)顯示
overflow:hidden; ------------------將溢出文本隱藏
word-wrap: break-word;------設(shè)置自動(dòng)換行
通常設(shè)置前面2個(gè)就可以達(dá)到效果,如果有一些其他的需求,可以加上后面的幾個(gè)屬性。
5.去掉編輯時(shí)的div周圍的焦點(diǎn)框
在CSS中設(shè)置outline:none;或者設(shè)置outline:0;即可。
6.Div進(jìn)入編輯狀態(tài)后選中所有的文本
這個(gè)使用selection對(duì)象的modify(alter, direction, granularity)方法可以實(shí)現(xiàn)。該方法用于改變焦點(diǎn)的位置,或擴(kuò)展、縮小selection的大小。使用這個(gè)方法的可以實(shí)現(xiàn)多種全選,移動(dòng)焦點(diǎn)等操作。下面是各個(gè)參數(shù)的含義:
alter:改變的方式。”move”,用于移動(dòng)焦點(diǎn);”extend”,用于改變selection。
direction:移動(dòng)的方向??蛇x值forward | backword或left | right。
granularity:移動(dòng)的單位或尺寸??蛇x值,character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1以后的版本才會(huì)支持此函數(shù), 官方文檔:https://developer.mozilla.org/en/DOM/Selection/modify。
下面的例子是當(dāng)div進(jìn)入編輯狀態(tài)后,選中所有文本:
復(fù)制代碼
代碼如下:if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}
遺憾的是FireFox的實(shí)現(xiàn)不支持"sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary"參數(shù)。需要修改一下思路,用line參數(shù)實(shí)現(xiàn):
復(fù)制代碼
代碼如下: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. 設(shè)置div的滾動(dòng)條自動(dòng)滾到最后的位置
這里要用到div的幾個(gè)有用的屬性:scrollTop、scrollLeft、scrollWidth、scrollHeight。先看下面的實(shí)現(xiàn)示例:
復(fù)制代碼
代碼如下:<!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-8" />
<meta name="keywords" content="滾動(dòng)條, scrollbar, 頁面底部, 聊天窗口, " />
<meta name="description" content="有些時(shí)候(如開發(fā)聊天程序),我們需要將將滾動(dòng)條(scrollbar)保持在最底部,比如聊天窗口,最新發(fā)出和收到的信息要顯示在最下方,如果要看到最下方的內(nèi)容,就必須保證滾動(dòng)條保持在最底部。"/>
<title>將滾動(dòng)條(scrollbar)保持在最底部的方法 - 滾動(dòng)條, scrollbar, 頁面底部, 聊天窗口, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">將滾動(dòng)條(scrollbar)保持在最底部的方法</h3>
<div id="example_main">
<!--************************************* 實(shí)例代碼開始 *************************************-->
<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">請(qǐng)點(diǎn)擊“插入一行”按鈕,插入最新信息,當(dāng)出現(xiàn)滾動(dòng)條時(shí),滾動(dòng)條將自動(dòng)保持在底部。</span>
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;"></div>
<input type="button" value="插入一行" onclick="add();">
<!--************************************* 實(shí)例代碼結(jié)束 *************************************-->
</div>
</div>
</body>
</html>
滾動(dòng)到最下面就是設(shè)置div.scrollTop = div.scrollHeight;即可。scrollHeight是內(nèi)部元素的絕對(duì)寬度,包含內(nèi)部元素的隱藏的部分。scrollLeft 也是類似道理,滾動(dòng)到最右邊的話就是設(shè)置div.scrollLeft = div.scrollWidth;即可。
此外,結(jié)合div的offsetHeight,offsetLeft等自身相關(guān)度量屬性,可以很方便進(jìn)行滾動(dòng)條位置的控制。
8.div輸入框高度自適應(yīng)
高度自適應(yīng)的意思是說:隨著輸入的行數(shù)越來越多,輸入框會(huì)越來越高,當(dāng)?shù)揭欢ǜ叨群笤俪霈F(xiàn)垂直的滾動(dòng)條。
作為多行文本域功能來講,textarea滿足了我們大部分的需求。然而,textarea有一個(gè)不足就是不能像普通div標(biāo)簽一樣高度可以跟隨內(nèi)容自適應(yīng)。textarea總是高度固定的。有時(shí)候,為了增加交互體驗(yàn)想讓文本域高度自適應(yīng)的時(shí)候,就會(huì)遇到麻煩。當(dāng)然,你還是可以通過使用JS來控制高度,實(shí)現(xiàn)自適應(yīng)。實(shí)際上,這里我們就可以使用div去模擬這樣的效果。下面是來自網(wǎng)友的一個(gè)實(shí)現(xiàn):
HTML代碼:
復(fù)制代碼
代碼如下:<div class="testbox" contenteditable="true"></div>
對(duì)應(yīng)的CSS代碼:
復(fù)制代碼
代碼如下:.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;
}
其實(shí)很多的實(shí)現(xiàn)都來源于網(wǎng)上,這里對(duì)廣大網(wǎng)友表示真摯的感謝!這里的很多問題也有很多別的實(shí)現(xiàn)方式,這里還是鼓勵(lì)大家積極思考,把相應(yīng)的知識(shí)變成自己的東西!
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情??!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01
- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27