模擬實現文字框游標效果程式碼例項
分享一段程式碼例項,它模擬實現了文字框游標效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { font-family: 'sans-serif'; } #inputText { position: relative; width: 300px; height: 30px; line-height: 30px; } #inputText .real { position: absolute; width: 100%; top: 0; bottom: 0; -webkit-appearance: none; border: none; background: none; color: transparent; font-size: 14px; } #inputText .real::selection { background: none; color: transparent; } #inputText .display { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #inputText .display .showText { position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #f00; font-size: 14px; } #inputText .display .cursorPosition { position: absolute; width: 1px; top: 0; bottom: 0; background: #0f0; margin-left: 2px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $('.real').on('keyup', function () { var $this = $(this); var value = $this.val() $('.showText').text(value); var selctionStart = $this[0].selectionStart; var p = new RegExp(/[^\u4e00-\u9fa5]/g); var zhL = value.replace(p, '').length; $('.cursorPosition').stop(true, true).animate({ 'left': ((value.length - zhL) + zhL * 2) * 7 }); }); }) </script> </head> <body> <div id="inputText"> <div class="display"> <div class="showText"></div> <div class="cursorPosition"></div> <div class="range"></div> </div> <input class="real" /> </div> </body> </html>
相關文章
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- 實現密碼框預設文字效果例項程式碼密碼
- jquery實現的在游標處插入文字程式碼例項jQuery
- js模擬實現多型效果程式碼例項JS多型
- css模擬實現雙擊效果程式碼例項CSS
- 模擬實現連結title效果程式碼例項
- 實現多個文字框輸入同步效果程式碼例項
- javascript模擬實現滾動條效果程式碼例項JavaScript
- js實現文字框提示程式碼例項JS
- 文字框輸入內容實現智慧提示效果程式碼例項
- 當前文字框高亮效果程式碼例項
- input文字框圓角效果程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- javascript模擬實現連結的title效果例項程式碼JavaScript
- canvas模擬彈幕效果程式碼例項Canvas
- 模擬發放紅包效果程式碼例項
- 模擬實現Object.is()方法程式碼例項Object
- javascript模擬實現toAarray()方法程式碼例項JavaScript
- 實現文字框輸入內容提示程式碼例項
- js點選文字框選中文字效果程式碼例項JS
- textarea文字框輸入文字數目倒計效果程式碼例項
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- canvas實現文字線性漸變效果程式碼例項Canvas
- 文字嵌入邊框程式碼例項
- js模擬實現hashCode()方法程式碼例項JS
- js模擬實現replaceAll()函式程式碼例項JS函式
- css模擬實現雙擊事件程式碼例項CSS事件
- 密碼框提示文字程式碼例項密碼
- input文字框實現寬度自適應程式碼例項
- js模擬實現alert()函式彈出警告視窗效果程式碼例項JS函式
- css3實現的文字下滑出現效果程式碼例項CSSS3
- 實現網頁標題跳動效果程式碼例項網頁
- css實現的多行文字垂直居中效果程式碼例項CSS
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- 模擬實現select下拉選單例項程式碼單例