2

NOTE: This is NOT a duplicate of Is there a logical alternative for the Escape key? as this is for the numpad.

I am designing a web app which should look like a real app on mobile. To clear a field, I have seen the Esc key works best. However, on mobile, the input will popup a numpad. Is there any alternative that works for mobile (on the numpad)?

EDIT 1: If there is a more logical alternative to the escape key for this situation, please suggest it.

EDIT 2: The people who will be using this are very tech-savvy, and they prefer keyboard as much as possible, so please provide keyboard-oriented answers.

EDIT 3: I have decided not to implement the feature at all, because the functionality it provides would not be worth implementing. This is now a pool for ways to implement clear actions on input fields.

Improve this question

5 Answers 5

Reset to default
1

As has already been suggested, most text fields on mobile devices have a 'clear' button in the form of an 'X' to the right end of the field.

However, for an interface with a delete key I have also noted the following behaviours (in both Android and iOS):

1- tapping delete once will delete a single character to the immediate left of the caret.

2- holding the delete key down will start by deleting the 1st single character to the left of the caret then, after a pause, will continue to delete single characters.

3- After several single characters have been deleted, continued holding of the delete key will start deleting whole words.

4- After several whole words have been delete, continued holding of the delete key will clear the entire field.

Improve this answer
0

what about any swipe gesture? I have seeing even shacking your phone to clear data.

Improve this answer
1
  • I have two input fields, so if you swipe/shake, it won't know which input field to clear.
    – user62850
    Commented Jun 2, 2016 at 20:25
0

The best alternative on mobiles to clean fields is to display "x" button at the right side of the field.

Taking into account the long or right-aligned text there are three options: enter image description here

  1. Option 1. Disregard the formatting and let user edit the text left aligned. It's more convenient anyway. I prefer this option.
  2. Option 2. Expand the edit box to nearby cell and place the button there
  3. Option 3. When user starts editing shift the text in the cell to accommodate for the button.
Improve this answer
5
  • It might be too small, but I'll try. Thanks!
    – user62850
    Commented Jun 2, 2016 at 23:05
  • @AnirudhBalaji It should be as large as the cell, so user could easily hit it with a finger. This is more or less a standard way of cleaning fields on mobiles. I'm seeing it on some websites too.
    – mikryz
    Commented Jun 2, 2016 at 23:06
  • The fields in question are right-aligned, so how would I position the button?
    – user62850
    Commented Jun 2, 2016 at 23:34
  • The people I am designing for are heavy users of keyboard shortcuts, and are very tech-savvy.
    – user62850
    Commented Jun 2, 2016 at 23:43
  • @AnirudhBalaji I've updated my proposal accordingly. As for shortcuts, they virtually don't exist on mobile. You can't press several keys at once and it is not convenient anyway. If you feel like you need an extra button for this case, you may provide it by showing a toolbar at the bottom of the page when user starts editing. This toolbar may accommodate for any buttons. However, for the simple case of cleaning the content of the cell the solution I suggested is standard on mobiles.
    – mikryz
    Commented Jun 3, 2016 at 19:49
0

Usually, input fields on mobile get cleared if you hold the backspace/delete key foe a few seconds, and for me that's actually intuitive, as I try to do it always when I try to delete everything I've entered. It doesn't work everywhere, but I think it could be a good alternative in your case.

Improve this answer
0

It is usually best practice to choose the correct markup and let the browser implement the correct behaviour. Unless you are doing something very bespoke, there is probably something already out there that does the job for you. It's also more likely to be accessible.

If your input doesn't do what you want, ask if you are using the right type tag or start to question why you need the behaviour you are expecting.

For instance, if you implementing a search, then most browsers will put clear functionality in for you.

<input type='search' />

There are also a bunch of other types which may help you, including a reset button input type (make sure your inputs are in a form). These will follow the normal keyboard accessibility.

http://codepen.io/jonnymoo/pen/LRYQqL

List of types are here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

In short, see if what you are trying to achieve already exists. Failing this, can you reframe your problem to something that does - i.e. If the edit box doesn't clear as you expect, could your design be altered in some other way? Try not to fight against the browser.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.