Javascript mcUIHexByte test

Javascript - mcUIHexByte test

This page was used to develop the hex data fields needed for color specifications.

mcNumber	mcUIHexByte
		Not connected
		Connected

Test procedure

There are 2 lines

They each contain an mcNumber field and an mcUIHexByte field - the class names are case sensitive
In the first line, the fields are independent
In the second, they are connected (sync has the id of a number field) - changes to the hex value will automatically change the value of the decimal field
The mcUIHexByte values can be modified using
- The keyboard - type hex values, 0 to 9 and A thru F
- The Mouse Wheel
- The Up/Down arrow keys
The Shift key affects which digit is modified by the Mouse Wheel and arrow keys

The basic test can be performed in either hex field - valid values are from 00 to FF

Using the keyboard, verify that values from 0 to 9 and from A to F can be entered
Verify that values from A to f are not case sensitive and are automatically converted to upper case
Verify that when a value larger than FF is entered, the value is automatically changed to FF
Use the mouse wheel to change the value
- Verify that the values change from zero to F, and that they roll over correctly when increasing and decreasing
- Press the shift key and verify that the upper most digit changes
Use the Up and Down arrow keys to change the values
- Verify that the shift key causes the upper most digit to change.
Verify that backspace and delete work as expected
Press numlock and verify that the number keys work
Verify that none of the other keys has any effect

In the second row, the number and hex fields are connected - any change in the hex value should be automatically converted to decimal and displayed in the associated numeric field. Numbers entered in the decimal field are not automatically displayed in the hex field.

In the connected hex field, type 20 - that should display 32 in the associated mcNumber field
Use the mouse wheel, the value in the connected field should change
Use the arrow keys, the value in the connected field should change

Usage

To use a hex control, add the following to the head section.

Hex byte field code example - class is case sensitive, sync points to a number field.

<input type="text" class="mcUIHexByte" id="mc2ABC" size=1 value=28 sync="mc2ABCd">

MS Edge design problem

In an input field, the position of the caret (text input cursor) indicates where new text will be inserted. In HTML5 javascript, this can be controlled by setting selectionStart and selectionEnd to the same value. This worked fine in every browser I tested, except MS Edge 25 (Windows 10). The following code

  UITextField.selectionStart = xx; // place the caret in an almost logical place

Produced this error

SCRIPT606: Could not complete the operation due to error 800a025e.

According to this stackoverflow post

Edge needs the focus() set before selectionStart or selectionEnd are used

Well, that actually makes sense - the caret should only be visible in the element that has focus.

On the other hand, I should be able to set highlights in text that is not visible. Therefore, there is absolutely no reason to make a rule like that.

To determine which object has focus, use

document.activeElement

According to w3schools

The activeElement property returns the currently focused element in the document.

And this is the fix I used

  if (UITextField == document.activeElement){
    UITextField.selectionStart = xx; // place the caret in an almost logical place
    UITextField.selectionEnd   = xx;
  }

This problem was not discovered using the testcases on this page. The mcUIColorPicker was using the component in a slightly different way (several components being updated at the same time via software). When only one component was modified at a time, there was no error.

Javascript - write once, test everywhere !!

Author: Robert Clemenzi