The subtle features of a textbox

I've implemented textboxes a handful of times for games and applications.

Each time I forget a feature or shortcut, which becomes painfully obvious when I use the textbox.

This is also something I often experience in commercial games - where common features are missing - e.g. being able to delete words with Ctrl + Delete

I thought it would be fun to list all the features/shortcuts/keyboard combinations I feel are required.

Blinking caret

1. A blinking caret should be visible for 500ms and off for 500ms.
2. Any movement of the caret should reset the blinking.

Writing

1. Primary feature of the textbox - remember to advance the caret

Deleting

1. Backspace deletes the character left of the caret and moves the caret left.
2. Delete deletes the character right of the caret.

Deleting by word

1. Ctrl + Backspace deletes from the current position to the first beginning of a word - left of the caret.
2. Ctrl + Delete deletes from the current position to the first end of a word - right of the caret

What describes a word will be explained later.

Moving left and right

1. ◄ moves the caret left.
2. ► moves the caret right.

A caret can be placed after the last character. So if a textbox has 2 characters, a caret can have 3 possible positions.

Moving to the start and end

1. Home moves the caret to the start.
2. End moves the caret to the end.

Moving by words

1. Ctrl + ◄ jumps a word left.
2. Ctrl + ► jumps a word right.

This behavior differs quite a lot from application to application.

One of the biggest differences is whether jumping right results in landing closest start or end of a word.

Besides that, there are a lot of smaller differences in how they handle symbols.

This is how I like to implement it:

First I categorize each character into one of these three.

1. Whitespace - Spaces, tabs, and newlines
2. Symbols - Dots, exclamation marks, brackets, quotes, etc.
3. Alphanumeric - A-Z and 0-9, underscore is also included in this group

Then take note of which category the current character is in
(whitespace = 1, symbol = 2 or alphanumeric = 3).

Then keep moving forward until you see a character from another category (or you reach the end).

If the new category is less than the current one - you can stop.

Otherwise, if it's greater change the "note" to this new category and continue.

This gives the result shown above.

Select left and right

1. Shift + ◄ move "selection end point" left.
2. Shift + ► move "selection end point" right.

A selection consists of a starting point and an endpoint.

If no selection is active, the starting point is set to the caret position, and the endpoint is moved.

The endpoint can be positioned left of the start point.

Select to start and end

1. Shift + Home move "selection end point" to the end.
2. Shift + End move "selection end point" to the start.

Select by words

1. Shift + ◄ jump "selection endpoint" one word left.
2. Shift + ► jump "selection endpoint" one word right.

Select all

1. Ctrl + A selects all text

Deselecting left and right

If selection is active:
1. ◄ / ► moves the caret to the leftmost or rightmost point of the selection - will also cancel the selection.

Deselecting to the start or end

If selection is active:
1. Home move caret to the start - will also cancel the selection
2. End move caret to the end - will also cancel the selection.

Delete selection

If selection is active:
1. Backspace and Delete will remove the characters within the selection and place caret at leftmost point - will also cancel the selection.

Write to selection

If selection is active:
1. Any character written will replace the characters within the selection - and also cancel the selection.

Thanks!

Thank you for sticking around till the end. I hope it has been informative and perhaps you've learned a thing or two. :)

If you have any questions, thoughts, or comments, feel free to reach me at hello@eibx.com