Intelligent prompt input box cursor position based on jQuery & CSS3

For a given input box, it would be great to show the position of the current cursor in the entire input string and the number of remaining texts when the text exceeds the input box! It would be nice if you could implement this function without modifying DOM on any website.

Articles you may be interested in

• Recommended 12 excellent browser compatibility testing tools
• 10 sets of exquisite free website background management system templates
• 8 best cloud integrated development environments for developers
• Ten carefully selected online CSS3 code generation tools
• 8 recommended free Web security testing tools

 

In this article, we useJQueryThe position of the cursor in the smart input box. It does not need images and uses pureCSS3It is implemented in real time and accurate, which means that it automatically adapts when you add or delete text. Use the event proxy mechanism, so you don't have to worry about performance issues.

 

 

Download Source Code Online Demo

 

　　This plug-in has the following features:

• No image, pure CSS rendering;
• No additional DOM support is required;
• Supports automatic text movement;
• Accurate and dynamic, which means that you can automatically add or delete texts;
• It is displayed only when the text exceeds the visible area of the input box;
• Use the event proxy mechanism, so you don't have to worry about performance issues;

 

　　The usage is very simple. The following is the sample code:

// Initialize $ ('input: text '). inputIndicator (); // set the background position during initialization $ ('input: text '). inputIndicator ({bgPos: '31px '}); // cancel the prompt $ ('input: text '). inputIndicator ('deststroy ');

 

　　JSFiddle Online Demo(If the following demo does not display, refresh the page or visit address: http://jsfiddle.net/indicator ):

Browser compatibility:Best in Chrome, Firefox, and Safari!

Articles you may be interested in

 

• 10 sets of exquisite free website background management system templates
• Well-selected excellent jQuery Ajax paging plug-ins
• Ten carefully selected online CSS3 code generation tools
• 13 sets of exquisite webpage icons
• Cutting-edge Web: Amazing CSS3 applications

 

Link to this article: Innovative application: A jQuery plug-in that intelligently prompts the input location

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources