基於 jQuery & CSS3 實現智能提示輸入框游標位置

　　對於一個給定的輸入框，如果在文本超過輸入框的時候能顯示當前游標在整個輸入的字串中所在的位置和剩餘多少文本，那將會非常棒！如果可以在任何網站不修改 DOM 就可以實現這個功能，那該多好。 

您可能感興趣的相關文章

• 12款很棒的瀏覽器安全色性測試載入器推薦
• 10套精美的免費網站後台管理系統模板
• 開發人員必備的8個最佳雲端整合式開發環境
• 十款精心挑選的線上CSS3代碼產生工具
• 推薦8款優秀的免費 Web 安全性測試工具

 

　　在這篇文章中，我們使用 jQuery 實現智能輸入框游標的位置。它不需要映像，是使用純粹的 CSS3 實現的，而且即時、準確，這意味著你在添加或刪除文本的時候它會自動適應。使用事件代理機制實現，所以不用擔心效能問題。

 

650) this.width=650;" style="display: block; margin-left: auto; margin-right: auto;" src="http://www.bkjia.com/uploads/allimg/131228/121620GX-0.png" alt="" />

 

下載源碼    線上示範

 

　　這款外掛程式的只要有以下特色：

• 不需要圖片，純 CSS 渲染；
• 不需要額外的 DOM 支援；
• 支援文本選擇自動移動方向；
• 準確和動態，這意味著你添加或刪除文本它會自動適應；
• 只有在文本超出輸入框可視地區的時候才顯示；
• 使用事件代理機制實現，不用擔心效能問題；

 

　　使用非常簡單，下面是範例程式碼：

// 初始化$('input:text').inputIndicator();// 初始化時設定背景位置$('input:text').inputIndicator({ bgPos:'31px' }); // 取消提示 $('input:text').inputIndicator('destroy');

 

　　JSFiddle 線上示範如果下面的示範不能顯示請重新整理頁面或者訪問地址：http://jsfiddle.net/indicator/）：

 　　瀏覽器安全色：在 Chrome、Firefox 和 Safari 瀏覽器中效果最佳！

您可能感興趣的相關文章

 

• 10套精美的免費網站後台管理系統模板
• 精心挑選的優秀 jQuery Ajax 分頁外掛程式
• 十款精心挑選的線上CSS3代碼產生工具
• 讓人愛不釋手的13套精美網頁表徵圖素材
• Web前沿：那些讓人驚歎的CSS3應用

 

本文連結：創新應用：一款智能提示輸入位置的 jQuery 外掛程式

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文出自 “夢想天空” 部落格，請務必保留此出處http://lihongbo.blog.51cto.com/3956353/1107474