最近在csdn問答板塊看到了乙個問題:
如何實現textarea中輸入@在右下方出現乙個提示框?
主要難點是游標所在的位置,網上找了下,大多是獲取游標所在的字元位數,而不是距離開頭的寬高,所以捨棄。
但是本文還是需要這個技術,來判斷游標是不是在文字最後。
//輸入框獲取游標
function
getposition
(element) else
if (element.selectionstart || element.selectionstart == '0')
return cursorpos;
}
新思路:計算文字中有多少和位元組,2個位元組為乙個字,根據文字的字型大小和字數獲取到文字的長度,由這個長度再根據所處環境計算提示框的位置。
所處環境指的是該元素所在位置,游標相對於文字域所在位置(根據總長度和文字域寬度判斷在游標第幾行的哪個位置))。
下面是乙個簡單的demo,是以輸入框為例,相比文字域簡單很多。
lang="en">
charset="utf-8">
documenttitle>
* .box
#ipt
#list
#list
li #list
li:hover
style>
head>
class='box'>
type="text"
id='ipt'>
id='list'>
qq.comli>
sina.comli>
163.comli>
ul>
div>
var ipt = document.getelementbyid('ipt');
var list = document.getelementbyid('list');
ipt.oninput = function
(e)else
}for(var i=0;ifunction
(e) }
//輸入框獲取游標
function
getposition
(element) else
if (element.selectionstart || element.selectionstart == '0')
return cursorpos;
}script>
body>
html>增加文字域的案例
lang="en">
charset="utf-8">
documenttitle>
* .box
#ipt
#list
#list
li #list
li:hover
style>
head>
class='box'>
sina.comli>
163.comli>
ul>
div>
var ipt = document.getelementbyid('ipt');
var list = document.getelementbyid('list');
ipt.oninput = function
(e) list.style.left = (len*fz)%wd==0?wd:(len*fz)%wd + pd + "px";
list.style.top = j*lh + "px";
list.style.display = "block";
}else
}for(var i=0;ifunction
(e) }
//輸入框獲取游標
function
getposition
(element) else
if (element.selectionstart || element.selectionstart == '0')
return cursorpos;
}script>
body>
html>
javascript 設定和獲取cookie
在做專案的時候需要在前端獲取和設定cookie,原本想用jquery.cookie.js,但是懶得引入指令碼,就在js檔案裡直接使用了js的函式來呼叫。function getcookie cname return 呼叫 getcookie name function setcookie c nam...
Javascript的dom獲取設定
使用dom獲取元素 1.根據id獲取元素 document.getelementbyid id的值 2.根據標籤獲取元素 document.getelementsbytagname 標籤名 3.根據name屬性值獲取元素 document.getelementsbyname name屬性值 4.根據...
JavaScript靜態和動態獲取方法
先建立乙個p標籤,為它設定id為test 這是一段測試文字!var otest document.getelementbyid test 在這裡改變獲取物件的顏色和id var otest document.getelementbyid test otest.style.color red otes...