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

您可能感興趣的相關文章

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

下載源碼    在線演示

　　這款插件的只要有以下特色：

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

　　使用非常簡單，下面是示例代碼：

// 初始化
$('input:text').inputIndicator();

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

// 取消提示 
$('input:text').inputIndicator('destroy');

　　JSFiddle 在線演示（如果下面的演示不能顯示請刷新頁面或者訪問地址：http://jsfiddle.net/indicator/）：

 　　瀏覽器兼容：在 Chrome、Firefox 和 Safari 瀏覽器中效果最佳！

您可能感興趣的相關文章

本文鏈接：創新應用：一款智能提示輸入位置的 jQuery 插件

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