Javascript文本框腳本實(shí)現(xiàn)方法解析
在 HTML 中,有兩種方式來表現(xiàn)文本框:一種是使用<input>元素的單行文本框,另一種是使用 <textarea>的多行文本框。這兩個控件非常相似,而且多數(shù)時候的行為也差不多。不過,它們之間仍 然存在一些重要的區(qū)別。
相對而言,<textarea>元素則始終會呈現(xiàn)為一個多行文本框。要指定文本框的大小,可以使用 rows 和 cols 特性。其中,rows 特性指定的是文本框的字符行數(shù),而 cols 特性指定的是文本框的字符列數(shù) (類似于 <inpu> 元素的 size 特性)。與 <input> 元素不同, <textarea> 的初始值必須要放在 <textarea>和</textarea>之間。
選擇文本
上述兩種文本框都支持 select()方法,這個方法用于選擇文本框中的所有文本。在調(diào)用 select() 方法時,大多數(shù)瀏覽器(Opera 除外)都會將焦點(diǎn)設(shè)置到文本框中。這個方法不接受參數(shù),可以在任何 時候被調(diào)用。
var textbox = document.forms[0].elements["textbox1"];
textbox.select();
在文本框獲得焦點(diǎn)時選擇其所有文本,這是一種非常常見的做法,特別是在文本框包含默認(rèn)值的時 候。因?yàn)檫@樣做可以讓用戶不必一個一個地刪除文本。
選擇(select)事件
與 select()方法對應(yīng)的,是一個 select 事件。在選擇了文本框中的文本時,就會觸發(fā) select 事件。不過,到底什么時候觸發(fā) select 事件,還會因?yàn)g覽器而異。
取得選擇的文本
雖然通過 select 事件我們可以知道用戶什么時候選擇了文本,但仍然不知道用戶選擇了什么文本。HTML5 通過一些擴(kuò)展方案解決了這個問題,以便更順利地取得選擇的文本。該規(guī)范采取的辦法是添加 兩個屬性:selectionStart 和 selectionEnd。這兩個屬性中保存的是基于 0 的數(shù)值,表示所選擇 文本的范圍(即文本選區(qū)開頭和結(jié)尾的偏移量)。因此,要取得用戶在文本框中選擇的文本,可以使用 如下代碼。
function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); }
IE8 及更早的版本中有一個 document.selection 對象,其中保存著用戶在整個文檔范圍內(nèi)選擇 的文本信息;兼容IE8的寫法
function getSelectedText(textbox){ if (typeof textbox.selectionStart == "number"){ return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); } else if (document.selection){ return document.selection.createRange().text; } }
選擇部分文本
現(xiàn)在除 select()方法之外,所有文本框都有一個 setSelectionRange() 方法。這個方法接收兩個參數(shù):要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引 (類似于 substring()方法的兩個參數(shù))。
textbox.value = "Hello world!"
//選擇所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"
E8 及更早版本支持使用范圍選擇部分文本。要選擇文本框中的部分文本,必須 首先使用 IE 在所有文本框上提供的 createTextRange()方法創(chuàng)建一個范圍,并將其放在恰當(dāng)?shù)奈恢?上。然后,再使用 moveStart()和 moveEnd()這兩個范圍方法將范圍移動到位。不過,在調(diào)用這兩個 方法以前,還必須使用 collapse()將范圍折疊到文本框的開始位置。此時,moveStart()將范圍的起 點(diǎn)和終點(diǎn)移動到了相同的位置,只要再給 moveEnd()傳入要選擇的字符總數(shù)即可。最后一步,就是使 用范圍的 select()方法選擇文本,如下面的例子所示。
textbox.value = "Hello world!"; var range = textbox.createTextRange(); //選擇所有文本 "Hello world!" range.collapse(true); range.moveStart("character", 0); range.moveEnd("character", textbox.value.length); range.select(); //選擇前 3 個字符 "Hel" range.collapse(true); range.moveStart("character", 0); range.moveEnd("character", 3); range.select(); //選擇第 4 到第 6 個字符 "o w" range.collapse(true); range.moveStart("character", 4); range.moveEnd("character", 3); range.select();
兼容IE8的寫法
function selectText(textbox, startIndex, stopIndex){ if (textbox.setSelectionRange){ textbox.setSelectionRange(startIndex, stopIndex); } else if (textbox.createTextRange){ var range = textbox.createTextRange(); range.collapse(true); range.moveStart("character", startIndex); range.moveEnd("character", stopIndex - startIndex); range.select(); } textbox.focus(); }
操作剪貼板
IE 是第一個支持與剪貼板相關(guān)事件,以及通過 JavaScript 訪問剪貼板數(shù)據(jù)的瀏覽器。HTML 5 后來也把剪貼板事件納入了規(guī)范。
- beforecopy:在發(fā)生復(fù)制操作前觸發(fā) 。
- copy:在發(fā)生復(fù)制操作時觸發(fā)。
- beforecut:在發(fā)生剪切操作前觸發(fā)。
- cut:在發(fā)生剪切操作時觸發(fā)。
- beforepaste:在發(fā)生粘貼操作前觸發(fā)。
- paste:在發(fā)生粘貼操作時觸發(fā)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 緩沖效果實(shí)現(xiàn)代碼 推薦
緩沖效果就是實(shí)現(xiàn)一個頁面的由慢到快或由快到慢的過程。2009-09-09js實(shí)現(xiàn)按Ctrl+Enter發(fā)送效果
按Ctrl+Enter發(fā)送,思路是監(jiān)聽textarea的onkeydown事件,當(dāng)ctrl鍵被按下,并且,keycode為13(回車),時,調(diào)用發(fā)送表單的函數(shù)2014-09-09基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果,代碼簡單易懂,需要的小伙伴參考下吧2015-11-11JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01javascript:google 向上向下滾動特效,兼容IE6,7,8,FF
這個代碼是我之前帶網(wǎng)上找的,因?yàn)榻裉煸俅斡玫?,所以記錄下來,免得以后都找不到,我現(xiàn)在想去搜它的說明文檔都搜不到!2010-08-08javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
圖片的旋轉(zhuǎn)可以說是一種效果,但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個范疇,其更具有使用性,功能性。照片有時候是需要橫過來的拍的,當(dāng)我們預(yù)覽或共享到web上時需要進(jìn)行旋轉(zhuǎn)。這個操作在以往可能更多的是交給軟件去完成,然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。2015-05-05