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

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

您可能感興趣的相關文章

• 12款很棒的瀏覽器兼容性測試工具推薦
• 10套精美的免費網站後臺管理系統模板
• 開發者必備的8個最佳雲端集成開發環境
• 十款精心挑選的在線CSS3代碼生成工具
• 推薦8款優秀的免費 Web 安全測試工具

 

　　在這篇文章中，咱們使用 jQuery 實現智能輸入框光標的位置。它不須要圖像，是使用純粹的 CSS3 實現的，並且實時、準確，這意味着你在添加或刪除文本的時候它會自動適應。使用事件代理機制實現，因此不用擔憂性能問題。

 

 

下載源碼    在線演示

 

　　這款插件的只要有如下特點：

• 不須要圖片，純 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 插件

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