Android開發(fā)分享-設(shè)計一個簡易富文本編輯器

簡易富文本編輯

讓HTML標(biāo)簽的contenteditable屬性設(shè)為true即可直接修改內(nèi)部內(nèi)容，但是Android和在pc網(wǎng)頁上使用可能存在差異。這里分享一個簡單的富文本編輯，需要配合Android使用。

這個富文本編輯目前通過于Android端交互可以向其中添加圖片、添加超鏈接、普通文本。主要靠js驅(qū)動（我的基礎(chǔ)不行，只能寫成這樣）。詳細(xì)解釋看代碼即可，需要配合Android知識。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本編輯</title>
    <script type="text/javascript">
		/*每一個被添加的標(biāo)簽（也就是圖片、超鏈接）都會被一層div包裹，固定其具體位置，并且每次添加完一個都會在其下部添加一個div用于輸入文本（可忽略）*/
        /*添加外層標(biāo)簽*/
        function outDiv(inLabel)
        {
            var outdiv=document.createElement("div");
            outdiv.style.textAlign="center";
            outdiv.contentEditable=true;
            outdiv.appendChild(inLabel);
            document.getElementById("main").appendChild(outdiv);
            var nextDiv=document.createElement("div");
            document.getElementById("main").appendChild(nextDiv);
            nextDiv.outerHTML="<div style='margin-left: 30px; margin-right: 30px;' contenteditable='true'><br></div>"
        }

        /*添加圖片*/
        function addPhoto(path)
        {
            var addImg=document.createElement("img");
            outDiv(addImg);
            addImg.outerHTML="<img src='" + path + "' alt='圖片存在問題' id='" + path + "'/>";

        }

		/*Android端存在圖片傳輸問題，是先將圖片保存到文件夾內(nèi)，再在html中調(diào)用，而在html中使用退格鍵即可刪除標(biāo)簽，所以Android端在適當(dāng)?shù)臅r候清除沒有用到的圖片*/
        /*確定圖片是否存在于html頁面中*/
        function isExistedPhoto(id)
        {
            if(document.getElementById(id))
            {
                return 1;
            }
            else
            {
                return 0;
            }
        }
		/*受Android端影響，啟用預(yù)覽模式時，將整體網(wǎng)頁所有標(biāo)簽設(shè)為不可編輯（代碼在下面），同時為了確保同步，每次預(yù)覽都會在Android端存儲，因為js沒法直接存儲文件，所以將網(wǎng)頁代碼整體返回到Android端接收并保存到文件內(nèi)，注意Android端應(yīng)對得到的結(jié)果轉(zhuǎn)碼，因為得到的是unicode碼，即使js已經(jīng)轉(zhuǎn)過了。*/
        /*返回整體網(wǎng)頁*/
        function wholeHtml()
        {

            return unescape(document.getElementsByTagName('html')[0].outerHTML.toString());
        }

        /*添加鏈接*/
        function addHref(href)
        {
            var a=document.createElement("a");
            a.href=href;
            a.innerText=href;
            a.contentEditable=true;
            outDiv(a);
        }
		
		/*開啟預(yù)覽模式則不可編輯，此時可以驗證鏈接*/
        /*可編輯設(shè)置*/
        function setEditAble(type)
        {
            if(!type)
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
            else
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
        }
        /*獲取對象*/
        function getEdit(label, type)
        {
            var aa=document.getElementsByTagName(label);
            if(!type)
            {
                for( var a1=0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable=false;
                }
            }
            else
            {
                for( var a1=0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable=true;
                }
            }
        }
    </script>
</head>
<body>
	<!--只要一個基礎(chǔ)div就行，甚至可以直接用body添加id代替-->
    <div id="main" contenteditable="true" style="margin-left: 30px; margin-right: 30px;"></div>
</body>
</html>

由于本人技術(shù)能力限制，無法很好的寫出代碼，只能提供一個簡易的編輯。

對應(yīng)Android端的簡易介紹

Android端根據(jù)js代碼設(shè)置對應(yīng)內(nèi)容。

webview建立

//根據(jù)id查找
webView=rootView.findViewById(R.id.makeArticle);
		//啟用js支持
        webView.getSettings().setJavaScriptEnabled(true);
//下面有一堆設(shè)置內(nèi)容，我也不太明白，大致是啟用js支持、支持網(wǎng)絡(luò)傳輸、支持html5格式存儲、支持本地存儲        webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
		//網(wǎng)頁處理，內(nèi)部可根據(jù)網(wǎng)頁開始、網(wǎng)頁完成等狀態(tài)做處響應(yīng)
        webClient=new WebClient();
        webView.setWebViewClient(webClient);
        //允許操作文件
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.getSettings().setBlockNetworkLoads(false);
        webView.getSettings().setBlockNetworkImage(false);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        //添加js可調(diào)用的函數(shù)類，函數(shù)使用javascriptinterface注釋，內(nèi)部函數(shù)可以被js所調(diào)用
        webView.addJavascriptInterface(new MakeArticleWeb(getContext(), username, articleId, webView), "makeArticle");

使用Android調(diào)用js代碼

//webview使用要在同一進(jìn)程中
//基礎(chǔ)格式
webView.loadUrl(url);//注意此調(diào)用異步加載，可能比后續(xù)loadUrl方法加載慢
//加載js代碼
webView.loadUrl("javascript：js函數(shù)(參數(shù))");//傳入一個字符串，前面javascript固定，后面為要調(diào)用的函數(shù)名，注意當(dāng)參數(shù)要傳入字符串時，加上單引號。
//loaddata
webView.loadData(文本，文本格式(mimetype)（例如text/html為html文本），編碼格式（例如UTF-8）);

WebView的loadUrl異步加載問題

因loadUrl加載順序不一致導(dǎo)致錯誤，因為webview使用必須在統(tǒng)一進(jìn)程中，最好避免。如果實在需要，可以通過WebViewCilent中onPageFinsihed方法，在其中運(yùn)行js可避免頁面未完全加載導(dǎo)致js無法執(zhí)行的異常。

示例：

 //網(wǎng)頁監(jiān)控
    public class WebClient extends WebViewClient
    {
		//頁面加載完成調(diào)用該方法
        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            onCreateViewUpdate();
            //不為空，更新數(shù)據(jù)
            if(addList.size() > 0 && number <=30)
            {
                for (Bitmap value : addList.values()) {
                    String savePath=MakeUUID.makeUUID(username + "-" + articleId) + ".png";
                    saveThePhotoWithBitmap(value, savePath);
                    //此處調(diào)用了js，而且該js必須在頁面完全加載后才能有效使用
                    webView.loadUrl(addTo(savePath, 0));
                }
            }
            //保存網(wǎng)頁數(shù)據(jù)
            saveHtml();
        }

webview調(diào)用goback方法返回亂七八糟的東西(例如返回url）

單擊webview中超鏈接進(jìn)入其它網(wǎng)頁再調(diào)用goback返回時可能出現(xiàn)問題，可通過修改默認(rèn)的gobakc返回流程改善。

代碼：

public String startUrl=thePath;//記錄一開始的url，直接通過內(nèi)部類寫死，或在構(gòu)造方法中定義
        private int pageNumber=0;//頁面計數(shù)，判斷當(dāng)前網(wǎng)頁是不是主網(wǎng)頁
        
        //重寫該方法，適配Android高版本
		@Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
        {
            System.out.println(startUrl);
            //如果頁面不是主頁面且當(dāng)前url不是一開始的url，跳轉(zhuǎn)會主界面
            if(!request.getUrl().equals(startUrl) && pageNumber !=0)
            {
                System.out.println(pageNumber);
                pageNumber=0;
                view.loadUrl(startUrl);//返回主界面
                return true;
            }
            else
            {
                pageNumber=1;
                //使用原流程
                return super.shouldOverrideUrlLoading(view, request);
            }
        }

最好把這些代碼寫在內(nèi)部類中方便調(diào)用。

NSI（Windows-1252）

ANSI 是 Windows 95 及其之前的 Windows 系統(tǒng)中默認(rèn)的字符集。

ANSI 也稱為 Windows-1252。

重要提示

ANSI 和 ISO-8859-1 非常相似，唯一的不同是在 32 個字符上。

在 ANSI 中，從 128 到 159 的字符用于一些有用的字符，比如歐元符號。

在 ISO-8859-1 中，這些字符映射為在 HTML 中不起作用的控制字符。

許多 Web 開發(fā)者聲明 ISO-8859-1，并使用這 32 個值，就像它們使用的是 Windows-1252。

由于這種常見的誤解，當(dāng) ISO-8859-1 被聲明時，瀏覽器將更改為 Windows-1252。這對以下文檔類型都適用：HTML4、HTML5 和 XHTML。

ANSI 和 ASCII

ANSI 的第一部分（實體編號 0-127）是原來的 ASCII 字符集。它包含數(shù)字、大小寫英文字母和一些特殊字符。

如需深入了解 ASCII，請查看完整的 ASCII 參考手冊。

ANSI 字符集

字符	編號	實體名稱	描述
	32		空格（space）
!	33		感嘆號（exclamation mark）
"	34	"	引號（quotation mark）
#	35		數(shù)字符號（number sign）
$	36		美元符號（dollar sign）
%	37		百分比符號（percent sign）
&	38	&	& 符號（ampersand）
'	39		撇號（apostrophe）
(	40		左括號（left parenthesis）
)	41		右括號（right parenthesis）
*	42		星號（asterisk）
+	43		加號（plus sign）
,	44		逗號（comma）
-	45		連字符（hyphen-minus）
.	46		句號（full stop）
/	47		斜線（solidus）
0	48		數(shù)字 0（digit zero）
1	49		數(shù)字 1（digit one）
2	50		數(shù)字 2（digit two）
3	51		數(shù)字 3（digit three）
4	52		數(shù)字 4（digit four）
5	53		數(shù)字 5（digit five）
6	54		數(shù)字 6（digit six）
7	55		數(shù)字 7（digit seven）
8	56		數(shù)字 8（digit eight）
9	57		數(shù)字 9（digit nine）
:	58		冒號（colon）
;	59		分號（semicolon）
<	60	<	小于號（less-than sign）
=	61		等于號（equals sign）
>	62	>	大于號（greater-than sign）
?	63		問號（question mark）
@	64		@ 符號（commercial at）
A	65		拉丁文大寫字母 A
B	66		拉丁文大寫字母 B
C	67		拉丁文大寫字母 C
D	68		拉丁文大寫字母 D
E	69		拉丁文大寫字母 E
F	70		拉丁文大寫字母 F
G	71		拉丁文大寫字母 G
H	72		拉丁文大寫字母 H
I	73		拉丁文大寫字母 I
J	74		拉丁文大寫字母 J
K	75		拉丁文大寫字母 K
L	76		拉丁文大寫字母 L
M	77		拉丁文大寫字母 M
N	78		拉丁文大寫字母 N
O	79		拉丁文大寫字母 O
P	80		拉丁文大寫字母 P
Q	81		拉丁文大寫字母 Q
R	82		拉丁文大寫字母 R
S	83		拉丁文大寫字母 S
T	84		拉丁文大寫字母 T
U	85		拉丁文大寫字母 U
V	86		拉丁文大寫字母 V
W	87		拉丁文大寫字母 W
X	88		拉丁文大寫字母 X
Y	89		拉丁文大寫字母 Y
Z	90		拉丁文大寫字母 Z
[	91		左方括號（left square bracket）
\	92		反斜線（reverse solidus）
]	93		右方括號（right square bracket）
^	94		插入符號（circumflex accent）
_	95		下劃線（low line）
`	96		重音符（grave accent）
a	97		拉丁文小寫字母 a
b	98		拉丁文小寫字母 b
c	99		拉丁文小寫字母 c
d	100		拉丁文小寫字母 d
e	101		拉丁文小寫字母 e
f	102		拉丁文小寫字母 f
g	103		拉丁文小寫字母 g
h	104		拉丁文小寫字母 h
i	105		拉丁文小寫字母 i
j	106		拉丁文小寫字母 j
k	107		拉丁文小寫字母 k
l	108		拉丁文小寫字母 l
m	109		拉丁文小寫字母 m
n	110		拉丁文小寫字母 n
o	111		拉丁文小寫字母 o
p	112		拉丁文小寫字母 p
q	113		拉丁文小寫字母 q
r	114		拉丁文小寫字母 r
s	115		拉丁文小寫字母 s
t	116		拉丁文小寫字母 t
u	117		拉丁文小寫字母 u
v	118		拉丁文小寫字母 v
w	119		拉丁文小寫字母 w
x	120		拉丁文小寫字母 x
y	121		拉丁文小寫字母 y
z	122		拉丁文小寫字母 z
{	123		左花括號（left curly bracket）
\|	124		豎線（vertical line）
}	125		右花括號（right curly bracket）
~	126		波浪線（tilde）
	127		未使用（NOT USED）
	128	€	歐元符號（euro sign）
	129		未使用（NOT USED）
?	130	&sbquo;	下單引號（single low-9 quotation mark）
?	131	&fnof;	帶鉤的拉丁文小寫字母 f
?	132	&bdquo;	下雙引號（double low-9 quotation mark）
…	133	…	水平省略號（horizontal ellipsis）
?	134	&dagger;	劍號（dagger）
?	135	&Dagger;	雙劍號（double dagger）
?	136	&circ;	修飾字母抑揚(yáng)音（modifier letter circumflex accent）
‰	137	&permil;	千分比符號（per mille sign）
?	138	&Scaron;	帶有 caron 的拉丁文大寫字母 S
?	139	&lsaquo;	左單角引號（single left-pointing angle quotation mark）
?	140	&OElig;	拉丁文大寫連字 OE
	141		未使用（NOT USED）
?	142	&Zcaron;	帶有 caron 的拉丁文大寫字母 Z
	143		未使用（NOT USED）
	144		未使用（NOT USED）
'	145	‘	左單引號（left single quotation mark）
'	146	’	右單引號（right single quotation mark）
"	147	“	左雙引號（left double quotation mark）
"	148	”	右雙引號（right double quotation mark）
?	149	•	著重號（bullet）
–	150	–	短破折號/連字符（en dash）
—	151	—	長破折號（em dash）
?	152	&tilde;	小波浪線（small tilde）
?	153	™	貿(mào)易標(biāo)記符號（trade mark sign）
?	154	&scaron;	帶有 caron 的拉丁文小寫字母 s
?	155	&rsaquo;	右單角引號（single right-pointing angle quotation mark）
?	156	&oelig;	拉丁文小寫連字 oe
	157		未使用（NOT USED）
?	158	&zcaron;	帶有 caron 的拉丁文小寫字母 z
?	159	&Yuml;	帶有分音符（diaeresis）的拉丁文大寫字母 Y
	160		不換行空格（no-break space）
?	161	¡	倒置感嘆號（inverted exclamation mark）
￠	162	¢	美分符號（cent sign）
￡	163	£	英鎊符號（pound sign）
¤	164	¤	貨幣符號（currency sign）
￥	165	¥	日元符號（yen sign）
\|	166	¦	間斷的豎杠（broken bar）
§	167	§	小節(jié)號（section sign）
¨	168	¨	分音符號（diaeresis）
?	169	©	版權(quán)所有（copyright sign）
a	170	ª	陰性序數(shù)記號（feminine ordinal indicator）
?	171	«	左雙角引號（left-pointing double angle quotation mark）
?	172	¬	否定符號（not sign）
	173		軟連字符（soft hyphen）
?	174	®	注冊商標(biāo)（registered sign）
ˉ	175	¯	長音符號（macron）
°	176	°	度符號（degree sign）
±	177	±	加減號/正負(fù)號（plus-minus sign）
2	178	²	上標(biāo) 2（superscript two）
3	179	³	上標(biāo) 3（superscript three）
′	180	´	尖音符號（acute accent）
μ	181	µ	微米符號（micro sign）
?	182	¶	段落符號（pilcrow sign）
·	183	·	中間點（middle dot）
?	184	¸	變音符號（cedilla）
1	185	¹	上標(biāo) 1（superscript one）
o	186	º	陽性序數(shù)記號（masculine ordinal indicator）
?	187	»	右雙角引號（right-pointing double angle quotation mark）
?	188	¼	1/4 分?jǐn)?shù)（vulgar fraction one quarter）
?	189	½	1/2 分?jǐn)?shù)（vulgar fraction one half）
?	190	¾	3/4 分?jǐn)?shù)（vulgar fraction three quarters）
?	191	¿	倒置問號（inverted question mark）
à	192	À	帶有重音符號（grave）的拉丁文大寫字母 A
á	193	Á	帶有尖音符號（acute）的拉丁文大寫字母 A
?	194	Â	帶有抑揚(yáng)音符號（circumflex）的拉丁文大寫字母 A
?	195	Ã	帶有波浪線的拉丁文大寫字母 A
?	196	Ä	帶有分音符（diaeresis）的拉丁文大寫字母 A
?	197	Å	帶有上圓圈的拉丁文大寫字母 A
?	198	Æ	拉丁文大寫字母 AE
?	199	Ç	帶有變音符號（cedilla）的拉丁文大寫字母 C
è	200	È	帶有重音符號（grave）的拉丁文大寫字母 E
é	201	É	帶有尖音符號（acute）的拉丁文大寫字母 E
ê	202	Ê	帶有抑揚(yáng)符號（circumflex）的拉丁文大寫字母 E
?	203	Ë	帶有分音符（diaeresis）的拉丁文大寫字母 E
ì	204	Ì	帶有重音符號（grave）的拉丁文大寫字母 I
í	205	Í	帶有尖音符號（acute）的拉丁文大寫字母 I
?	206	Î	帶有抑揚(yáng)音符號（circumflex）的拉丁文大寫字母 I
?	207	Ï	帶有分音符（diaeresis）的拉丁文大寫字母 I
D	208	Ð	拉丁文大寫字母 Eth
?	209	Ñ	帶有波浪線的拉丁文大寫字母 N
ò	210	Ò	帶有重音符號（grave）的拉丁文大寫字母 O
ó	211	Ó	帶有尖音符號（acute）的拉丁文大寫字母 O
?	212	Ô	帶有抑揚(yáng)音符號（circumflex）的拉丁文大寫字母 O
?	213	Õ	帶有波浪線的拉丁文大寫字母 O
?	214	Ö	帶有分音符（diaeresis）的拉丁文大寫字母 O
×	215	×	乘號（multiplication sign）
?	216	Ø	帶有刪除線的拉丁文大寫字母 O
ù	217	Ù	帶有重音符號（grave）的拉丁文大寫字母 U
ú	218	Ú	帶有尖音符號（acute）的拉丁文大寫字母 U
?	219	Û	帶有抑揚(yáng)音符號（circumflex）的拉丁文大寫字母 U
ü	220	Ü	帶有分音符（diaeresis）的拉丁文大寫字母 U
Y	221	Ý	帶有尖音符號（acute）的拉丁文大寫字母 Y
T	222	Þ	拉丁文大寫字母 Thorn
?	223	ß	拉丁文小寫字母 sharp s
à	224	à	帶有重音符號（grave）的拉丁文小寫字母 a
á	225	á	帶有尖音符號（acute）的拉丁文小寫字母 a
a	226	â	帶有抑揚(yáng)音符號（circumflex）的拉丁文小寫字母 a
?	227	ã	帶有波浪線的拉丁文小寫字母 a
?	228	ä	帶有分音符（diaeresis）的拉丁文小寫字母 a
?	229	å	帶有上圓圈的拉丁文小寫字母 a
?	230	æ	拉丁文小寫字母 ae
?	231	ç	帶有變音符號（cedilla）的拉丁文小寫字母 c
è	232	è	帶有重音符號（grave）的拉丁文小寫字母 e
é	233	é	帶有尖音符號（acute）的拉丁文小寫字母 e
ê	234	ê	帶有抑揚(yáng)音符號（circumflex）的拉丁文小寫字母 e
?	235	ë	帶有分音符（diaeresis）的拉丁文小寫字母 e
ì	236	ì	帶有重音符號（grave）的拉丁文小寫字母 i
í	237	í	帶有尖音符號（acute）的拉丁文小寫字母 i
?	238	î	帶有抑揚(yáng)音符號（circumflex）的拉丁文小寫字母 i
?	239	ï	帶有分音符（diaeresis）的拉丁文小寫字母 i
e	240	ð	拉丁文小寫字母 eth
?	241	ñ	帶有波浪線的拉丁文小寫字母 n
ò	242	ò	帶有重音符號（grave）的拉丁文小寫字母 o
ó	243	ó	帶有尖音符號（acute）的拉丁文小寫字母 o
?	244	ô	帶有抑揚(yáng)音符號（circumflex）的拉丁文小寫字母 o
?	245	õ	帶有波浪線的拉丁文小寫字母 o
?	246	ö	帶有分音符（diaeresis）的拉丁文小寫字母 o
÷	247	÷	除號（division sign）
?	248	ø	帶有刪除線的拉丁文小寫字母 o
ù	249	ù	帶有重音符號（grave）的拉丁文小寫字母 u
ú	250	ú	帶有尖音符號（acute）的拉丁文小寫字母 u
?	251	û	帶有抑揚(yáng)音符號（circumflex）的拉丁文小寫字母 u
ü	252	ü	帶有分音符（diaeresis）的拉丁文小寫字母 u
y	253	ý	帶有尖音符號（acute）的拉丁文小寫字母 y
t	254	þ	拉丁文小寫字母 thorn
?	255	ÿ	帶有分音符（diaeresis）的拉丁文小寫字母 y

ANSI 控制字符

ANSI 控制字符（00-31，加上 127）最初被設(shè)計用來控制諸如打印機(jī)和磁帶驅(qū)動器之類的硬件設(shè)備。

控制字符（除了水平制表符、換行、回車之外）在 HTML 文檔中不起任何作用。

字符	編號	描述
NUL	00	空字符（null character）
SOH	01	標(biāo)題開始（start of header）
STX	02	正文開始（start of text）
ETX	03	正文結(jié)束（end of text）
EOT	04	傳輸結(jié)束（end of transmission）
ENQ	05	請求（enquiry）
ACK	06	收到通知/響應(yīng)（acknowledge）
BEL	07	響鈴（bell）
BS	08	退格（backspace）
HT	09	水平制表符（horizontal tab）
LF	10	換行（line feed）
VT	11	垂直制表符（vertical tab）
FF	12	換頁（form feed）
CR	13	回車（carriage return）
SO	14	不用切換（shift out）
SI	15	啟用切換（shift in）
DLE	16	數(shù)據(jù)鏈路轉(zhuǎn)義（data link escape）
DC1	17	設(shè)備控制 1（device control 1）
DC2	18	設(shè)備控制 2（device control 2）
DC3	19	設(shè)備控制 3（device control 3）
DC4	20	設(shè)備控制 4（device control 4）
NAK	21	拒絕接收/無響應(yīng)（negative acknowledge）
SYN	22	同步空閑（synchronize）
ETB	23	傳輸塊結(jié)束（end transmission block）
CAN	24	取消（cancel）
EM	25	已到介質(zhì)末端/介質(zhì)存儲已滿（end of medium）
SUB	26	替補(bǔ)/替換（substitute）
ESC	27	溢出/逃離/取消（escape）
FS	28	文件分隔符（file separator）
GS	29	組分隔符（group separator）
RS	30	記錄分隔符（record separator）
US	31	單元分隔符（unit separator）

DEL	127	刪除（delete）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

節(jié)課我們講了關(guān)于事件的基本知識，主要包括事件對象和它的一些應(yīng)用。從這節(jié)課開始我們學(xué)習(xí)2個更加高級的知識。

默認(rèn)行為

當(dāng)我們打開一個空白頁面的時候，右鍵點擊頁面會彈出來一個菜單——當(dāng)然，實際上我們從來沒有通過JS寫過這么一個菜單，而是瀏覽器自帶的功能。這種瀏覽器本身自己帶的功能和事件我們將它稱之為默認(rèn)行為。

在這之前，要為大家介紹一個新的事件——oncontextmenu，代表的就是當(dāng)用戶點擊右鍵呼出菜單的事件。現(xiàn)在我們用oncontextmenu來做一些事情。值得一提的是，oncontextmenu是可以有返回值的，如果我們return一個false的話會發(fā)生什么呢？

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標(biāo)題文檔</title> 
 <script>document.oncontextmenu=function (){
 return false; //阻止默認(rèn)事件};</script> 
 </head> 
 <body> 
 </body>
</html>

大家可以自己嘗試一下，如果我們return一個false值回去的話，右鍵菜單將會被阻止彈出。在系統(tǒng)默認(rèn)事件中return false的話可以有效地阻止該默認(rèn)事件。

當(dāng)然，阻止右鍵菜單并不是我們最終的目的，我們最終的目的是為了能彈出自定義右鍵菜單，我們現(xiàn)在來看一下，如何在屏蔽右鍵菜單的基礎(chǔ)之上，再彈出一個自己的菜單。

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標(biāo)題文檔</title> 
 <style>
 * {margin:0; padding:0; list-style:none;}
 #div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}
 </style> 
 <script>
 document.oncontextmenu=function (ev)
 {
 var oEvent=ev||event;
 var oDiv=document.getElementById('div1');
 oDiv.style.display='block';
 oDiv.style.left=oEvent.clientX+'px';
 oDiv.style.top=oEvent.clientY+'px';
 return false;
 };
 document.onclick=function ()
 {
 var oDiv=document.getElementById('div1');
 oDiv.style.display='none';
 };
 </script> 
 </head> 
 <body> 
 <div id="div1"> 
 <ul> 
 <li>aaa</li>
 <li>bbb</li> 
 <li>ccc</li> 
 <li>ddd</li> 
 </ul> 
 </div> 
 </body>
</html>

效果如下：

這個程序里面，我們除了用return false阻止了默認(rèn)的系統(tǒng)菜單外，還自定義了一個div，其位置為鼠標(biāo)點擊的位置，同時添加了一個點擊頁面其他位置時，div消失的效果——這樣就完成了一個自定義右鍵菜單。

到目前為止，我們學(xué)習(xí)了一下阻止默認(rèn)行為最簡單的一種應(yīng)用?，F(xiàn)在我們再來看一個默認(rèn)行為的另一種應(yīng)用——大家平時在表單里面會經(jīng)常需要用戶去填一些用戶名，密碼，郵箱，qq號等信息。當(dāng)我們輸入qq號時，我們希望用戶只能輸入數(shù)字，而不能輸入字母和符號，這應(yīng)該怎么做到呢？這里我們需要使用上節(jié)課提過的onkeydown事件。

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標(biāo)題文檔</title> 
 <script>window.onload=function (){
 var oTxt=document.getElementById('txt1');
 oTxt.onkeydown=function ()
 {
 var oEvent=ev||event;
 //alert(oEvent.keyCode);
 //0- 48
 //9- 57
 //如果 用戶按的 不是退格 并且 也不是數(shù)字if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
 {
 return false;
 }
 };
 };
</script> 
 </head> 
 <body> 
 <input type="text" id="txt1" /> 
 </body>
</html>

值得一提的是，如果我們將onkeydown的return值也設(shè)為false的話，我們將無法在頁面用鍵盤進(jìn)行任何輸入——實際上鍵盤輸入本身也是系統(tǒng)的一個默認(rèn)行為，因此可以用return false將它阻止掉。所以其實這個程序的邏輯很簡單——通過keyCode判斷輸入的字符是否為數(shù)字，如果不是數(shù)字的話，return false阻止其輸入即可（注意不要把keyCode為8的退格鍵阻止掉）。實際上來說默認(rèn)行為的各種應(yīng)用是非常廣的，我們這里只舉了兩個例子，其他的大家可以自己去發(fā)掘。

拖拽

拖拽的含義大家應(yīng)該都明白，這里我們先從它的原理開始說起。首先我們先來看一個簡單的布局：

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標(biāo)題文檔</title> 
 <style>#div1 {width:200px; height:200px; background:red; position:absolute;}</style> 
 <script>
 window.onload=function ()
 {
 var oDiv=document.getElementById('div1');
 var disX=0;
 var disY=0;
 oDiv.onmousedown=function (ev)
 {
 var oEvent=ev||event;
 disX=oEvent.clientX-oDiv.offsetLeft;
 disY=oEvent.clientY-oDiv.offsetTop;
 document.onmousemove=function (ev)
 {
 var oEvent=ev||event;
 oDiv.style.left=oEvent.clientX-disX+'px';
 oDiv.style.top=oEvent.clientY-disY+'px';
 };
 document.onmouseup=function ()
 {
 document.onmousemove=null;
 document.onmouseup=null;
 };
 return false; //這里是為了阻止火狐瀏覽器的一個小bug。
 };
 };
 </script> 
 </head> 
 <body> 
 <div id="div1"></div> 
 </body>
</html>

大家隨便在電腦上拖拽一個東西就可以發(fā)現(xiàn)，拖拽的一個性質(zhì)是：在拖拽時，鼠標(biāo)和元素右上角的距離是保持不變的。距離的求法也很簡單：用鼠標(biāo)的位置減去元素右上角的位置即可。

然后對于拖拽來說，大家可以很容易聯(lián)想到它涉及到的幾個JS事件：鼠標(biāo)按下，鼠標(biāo)移動和鼠標(biāo)抬起。通過這些東西的組合，我們就可以輕松寫出一個拖拽了（注意1.onmousemove事件需要添加為在onmousedown事件觸發(fā)后才會被觸發(fā)的事件2.onmousemove和onmouseup是添加給document而不是div1的事件，原因在于防止鼠標(biāo)移出div或屏幕）。

效果如下：

現(xiàn)在我們就擁有了一個沒有任何bug的拖拽，但雖然沒有程序上的bug，但是有一些用戶體驗不太好的地方，比如，當(dāng)用戶將拖拽框拖出屏幕后可能就找不到拖拽框了。現(xiàn)在我們要嘗試解決這個問題：

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標(biāo)題文檔</title> 
 <style>
 #div1 {width:200px; height:200px; background:red; position:absolute;}
 </style> 
 <script>
 window.onload=function ()
 {
 var oDiv=document.getElementById('div1');
 var disX=0;
 var disY=0;
 oDiv.onmousedown=function (ev)
 {
 var oEvent=ev||event;
 disX=oEvent.clientX-oDiv.offsetLeft;
 disY=oEvent.clientY-oDiv.offsetTop;
 document.onmousemove=function (ev)
 {
 var oEvent=ev||event;
 var l=oEvent.clientX-disX;
 var t=oEvent.clientY-disY;
 if(l<0)
 {
 l=0;
 }
 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
 {
 l=document.documentElement.clientWidth-oDiv.offsetWidth;
 }
 if(t<0)
 {
 t=0;
 }
 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
 {
 t=document.documentElement.clientHeight-oDiv.offsetHeight;
 }
 oDiv.style.left=l+'px';
 oDiv.style.top=t+'px';
 };
 document.onmouseup=function ()
 {
 document.onmousemove=null;
 document.onmouseup=null;
 };
 return false;
 };
 };</script> 
 </head> 
 <body> 
 <div id="div1"></div> 
 </body>
</html>

我們用l和t來儲存div的位置，當(dāng)二者小于0的時候，將其變?yōu)?；當(dāng)二者大于可視區(qū)寬高-元素本身寬高的時候，將其變?yōu)榭梢晠^(qū)寬高-元素本身寬高。這樣就完成了一個完美的拖拽。

以上，我們就把拖拽常一些問題簡單的講解一下，后面我們還會針對拖拽做更多的應(yīng)用。

在線咨詢

上一篇：5個步驟，完成UX作品集整理設(shè)計
下一篇：50行Python代碼繪制數(shù)據(jù)大屏，這個可視化框架真

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Android開發(fā)分享-設(shè)計一個簡易富文本編輯器

您的項目需求