Cursor movement

HTML & CSS
21

It all depends on how you expect the user to do this?

The user can already backspace to the next input as that is built into most browsers bu just using SHIFT + TAB. Tab makes the cursor go to the next input and SHIFT + TAB makes it go back to the previous one. A savvy user would now this.

The backspace key deletes the character so you wouldn’t want to use that unless you wanted to delete and then auto focus in the previous input and that would require JS.

You could program the arrow keys to go back but them you’d still need to tell your user about it anyway so you may as well tell them to use Shift + Tab.

Here’s an example using the arrow keys to go backwards and forwards in those 5 inputs.

However I should refer you to the JS forum for further questions and more solid JS code than I can offer.

22

Ok
Thanks

23

O k. I copied the code from the codepen and the backspace didn’t work. However I did add the div id=result and the function as in post 18. Would that have an effect on the backspace?
Thanks

24

I meant the left and right arrows to go back and forth.

25

The left and right arrows are working on my demo. The div# results should not interfere with anything. Did you add the data attributes to the html?

Otherwise you must have accidentally copied incorrectly or you have other code interfering with it in some way.

It’s not possible to say unless we see a demo or full working code snippets. It would be helpful if you could do as I do and post a working codepen which makes it so much easier to debug and work with :slight_smile:

26

Ok.I have it working using the arrow keys
What if I want to use the backspace key?
I know the keynote is 8.

28

How do you backspace to delete the cell value and enter another input

29

You would need to clarify the procedure that you expect to happen ? It really needs defining in detail as there are a lot of things to consider.

The backspace key already deletes the text so is not really useful for editing as you are just deleting each item. It would not be usable to stop the backspace key deleting just so you can traverse the elements because then you’d need to use another key to delete.

I suppose you could let the backspace key do it’s normal job and then move it’s focus to the previous cell but that would mean the user could not re enter the letter in the cell they just deleted!

It would seem to me that a user would delete a single letter and replace it with another rather than deleting the whole word.

If you can first define how you want the backspace key to work then you can start to make it happen.

30

Isn’t that what the key already does by default?

31

Like if you have the word “clue” to go in the input squares, say you misspell this word, can you press the backspace key continually to the error to correct and continue typing, just as you would press the backspace key on a computer.
Does this make ANY sense???:smiley:

32

Yes sort of :wink:

You can make it almost work just using the same routine already.

e.g.

 case 8:
        //backspace key pressed
        moveInput(-1);
        break;

That will work apart from the last input as obviously backspace deletes the one before.

I’m not sure how to handle that but I’ll be back this evening and have another look. :slight_smile:

33

The best I can come up with is this:

It sort of works but you probably need to control the caret position a bit better when someone clicks into the input so that the backspace can work rather than the delete key. (I commented out the arrow key function.)

However this is out of my scope now and is really a question for the JS forum. :slight_smile:

NOTE: There’s a bug in Firefox with the flex rule so you need to remove that I have commented out here.

.clue-box__item {
  /*flex: 0 0 35px*/; 
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  margin: 0 -1px 0 0;
  text-align: center;
}
1 Like
34

The backspace works well!!
Thanks

35

Do I need to comment out the flexbox?

36

Yes just this rule as it breaks Firefox.

37

So instead do you just use the height and width properties?

38

Yes just use width and height.

We only want flexbox to align them side by side but we don’t want them to flex (stretch) because they are meant to be fixed height and width.

I’m not sure if the Firefox behaviour is a bug or not so will have to investigate.:slight_smile:

39

Just realised its the new min-width:auto setting is now the default in Firefox and that’s why the flex-basis wasn’t being honoured. Auto means shrink wrap the content which for a replaced element like an input is wider than the 35px that was set.

Other browsers will eventually implement this as that is now the standard.

All that was needed was to set min-width:0 to over-ride the default.

.clue-box__item {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  margin: 0 -1px 0 0;
  text-align: center;
  flex: 0 0 35px;
  min-width:0;
}

However what we have already is good enough and works ok.

40

How do I position two divs side by side in html and css?
Thanks

41

We just did it for 5 boxes above so follow the same pattern.:slight_smile:

Display flex on the parent wrapper and the children will line up side by side.

1 Like