We Keep Coding

How to get the 'characters moved distance" for a HTML5 input field

I'm trying to get how far the first character is moved from its original place in an input field.
Background: I'm trying to give syntax highlighting feature to an input field. I'm currently thinking of using multi-color rectangles placed below text to do this, so I have to consider how to place these rectangles at the exact same location with the text.
For example I have an input field like this, and the user inputs text. When the text length is greater than the width, the text gets moved to the left.
An example of this.
<input type="text" id="listItemEditorInputDemo">
#listItemEditorInputDemo {
width: 100;
}
When the text length is not greater than the input field width
not greater:
When the text length is greater than the input field width. Note that the first character is pushed backwards.
greater
So how do I get how much the sentence is pushed backwards? I want a pure Javascript solution. Thank you.

let listItemEditorInputDemoScrollLeft = document.getElementById(`listItemEditorInputDemo`).scrollLeft;
worked best for me.
See Element.scrollLeft.

How to create a custom textbox with a label and value?

I am not a designer but I am with a task to implement a functionality. I have to develop a working UI where a user can enter values in text box inside grid. While entering these values the user should have reference to a value which is different for each textbox in a grid. I therefore want to design a textbox where the user while entering the values gets to see the reference value then and there. can anyone suggest me a good design to solve this problem.
What I have thought of is that having a custom textbox with a part of left top of textbox as a uneditable label while the other area of textbox is editable to enter values.
so as seen in image , the top left is where I will show the value to be referred , while the white space is a textbox for user to enter the values.
If the proposed solution by me is a good one then how do I implement it? or any other solution anyone can suggest?

There are 2 methods.
You can use the reference label in absolute position and place it on the textbox with an equal amount of padding ( width of the reference label ) from the left.
You can use :before tag and apply it directly to the textbox. Give :before tag position absolute and textbox position relative.

Aligning two range inputs side by side to create an interval picker

I came up with an idea of building a range slider by using two different HTML range inputs placed next to each other.
Since there can only be one focused element at a time I came up with a solution of modifying the minimum, maximum and width of the inputs when focus changes between them.
See my solution - Using custom styling for webkit range input track and thumb.
Example
Range spans between 1 to 100. If first input is on 20 and the second input gets focus I will modify the first inputs maximum value to 20 and set the minimum value of the second input to 21. I will then set the width of the inputs to a percentage value dependent on the current value. So the first input described above will get the width of 20% and the second 80% to match values selected.
The issue
Since the thumb of the input will align left when set to its minimum value and to the right when set to the maximum value there is a small "jump" when focus changes and I modify the min and max values of the range inputs. The width of the thumb is set to 1rem and that value must be taken into account somehow together with the current value of the input itself (i think..). I just can't get that last part right.

Sliding Text in Text Input

Is there any way make some of the text slide left and disappear in the text input after the user puts a certain number of characters. For example when a user is typing their credit card number after the 16th number is inputted the number slides left in the input field and only the last 4 digits of the number is visible

There's no animation here, but I can certainly help add that if you need.
Live Demo: http://jsfiddle.net/7TVxC/1/
First set up a variable to hold the input after you have removed the other characters.
var ccNum;
Then make your function that checks if the input length is 16, save the input into the variable. Then we take off the first 12 characters leaving only the last 4.
Then we ne turn off the input so they don't think it's a bug. (You could probably set it up so they can still delete the characters, which would then return the input to normal showing all the characters but the one they deleted.)
$('input').keyup(function(e){
if($(this).val().length == 16){
ccNum = $(this).val();
$(this).val($(this).val().substr(12));
$(this).prop('disabled', true);
}
})
Alternatively you could do some css hackery and add a negative text-indent inside the if, but that could get tricky with different character sizes.

It is possible, but it involves a lot of work.
1. Set up the input and its styles, something like this: http://jsfiddle.net/FMmvV/
Set up a jQuery event that triggers whenever someone types in the input. Then, do something when the input has 16 characters.
2. The hard part is this: to have a fluid, smooth animation you'll want to animate the text inside the input via the text-indent property. Since it asks for pixel numbers, you'll also need to calculate the exact width of the first 12 characters so that you can properly offset the text by the correct amount.
This question might have some relevant information regarding how to calculate the width of a text without knowing the font family or font size:
https://stackoverflow.com/a/3395975/1718121
3. Clean up afterwards by removing the text-indent and the first 12 characters, add some functions that will allow your users to reset their input and re-enter something else.

Dynamically size a select list (Safari)

I would like to size a select list based on the width needed for the selected index(string). Say for example I have a list with 3 strings, short, medium, loooooong; I don't want the select list to automatically be as wide as its largest element, rather it should be as wide as its selected element.
The first method I tried: document.getElementById('selectList').style.width = (selectedText.length * 6) + 'px'; where selectedText is a string and 6 was a poor estimation of the width of a character. Without a monospaced font this does not work correctly.
The next method I tried was to set the innerHTML of an off screen div (top:-9999px) to the selected index and then: document.getElementById('selectList').style.width = document.getElementById('hiddenDiv').offsetWidth;
The problem with this method is that the width was also not correct, some really long strings made the select list way to long compared to the actual selected string.
Any ideas how I can dynamically size this select list based on the string width/length?

You can have a hidden span that is filled with the selected option value on change, grab its width, then set the select list to that width.
Demo