Dismiss
InnovationQ will be updated on Sunday, Oct. 22, from 10am ET - noon. You may experience brief service interruptions during that time.
Browse Prior Art Database

Method for Applying Selective Formatting to a Text Input Box on a Web Page

IP.com Disclosure Number: IPCOM000244903D
Publication Date: 2016-Jan-27
Document File: 2 page(s) / 29K

Publishing Venue

The IP.com Prior Art Database

Abstract

Disclosed is a method to apply selective formatting to a text input on a web page. The described method is not limited to regular expression-based rules nor suffers from known problems in existing implementations, namely HTML's contenteditable's style bleeding.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 52% of the total text.

Page 01 of 2

Method for Applying Selective Formatting to a Text Input Box on a Web Page

Disclosed is a method for selectively highlighting text within an input box. The described solution has the following properties that make it novel:
1) It allows for the use of any arbitrary algorithm for identifying the substrings that ought to be highlighted
2) It rebuilds the UI from an underlying model of the input whenever the model changes, which makes it robust to the "style bleeding" problem in naive solutions

   When designing web pages that accept text input, it can be desirable to selectively format parts of the input string in order to draw the user's attention to those parts, or to attach gestures that allow the user to further manipulate those parts. For example, consider a natural language search box for a large e-commerce website. Its creators may want to support queries of the form "show me books by Smith". For such a query, it would be useful to underline the words "books" and "Smith" and present further options to the user upon clicking them, such as narrowing down to a particular genre within books or picking a particular author out of many with the name Smith.

   Implementing this sort of functionality in HTML using off-the-shelf tools is difficult. The naive approach is to use a

with the property contenteditable="true". An event handler would listen for keypress events within the div, parse the contents and wrap parts of the input string in elements that could then have styles applied to them. However, this approach on its own is not sufficient because once styles have been applied, further edits by the user cause the styling to bleed in unexpected ways, causing a jarring user experience.

   To illustrate this, continuing with the example mentioned above, consider a query "show me books by Smith" where "books" and "Smith" are underlined. This would result in the following HTML structure:

show me books by Smith

   If the user then edits the text to read "show me bookshelves by Smith", then "bookshelves" would be underlined, even if this doesn't make sense for this given application domain. Additional logic is needed to invalidate styles that no longe...