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.
Related
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.
what would be the best way to auto-expand an input field based on user input?
I have an issue below where if there is more than 2 numbers the quantity input gets cut off, and there can be up to say 7 numbers... so I would like it to auto-expand.
If there's a css only solution that would be fabulous. Otherwise that's ok :-)
See below where the quantity is 166578 it doesn't show the full amount:
Thanks!
I think you could set the contenteditable attribute to true and set a min-width and max width in the CSS.
I'm working with an HTML input of type text. I'm manually getting and setting the cursor of the input programmatically in JS using the Selection API.
When the cursor is set to a particular position like this, the scroll for the input isn't automatically focused on the cursor's location. To force the scroll to focus, the input's scrollLeft has to be manually calculated and set where the cursor's location would be. This is where the problem arises.
The cursor's position is set by the index of the character in the input's string of text. If there are 40 characters in the string, setting the cursor to position 40 would set it to the end of the string. Unfortunately, scrollLeft is set using the width of each character, in pixels. Since all character's aren't the same width this presents a problem. This means, to manually set the focus of the input element to the position of the cursor, you must calculate the width of each character between the start of the string and the cursor's position index.
The easiest way I've thought of to accomplish this is to create a second input that's used to measure the width of each character in the string individually. Since theres no way to automatically get the width of any given character, the scrollWidth of this second input would equal the width of that single character. For my use case, the cursor will only ever change position one index at a time. This means I can increment or decrement the scrollLeft the width of each character one at a time.
Because this is would be super complicated, I'm wondering if anyone has come across something simple that will accomplish my goal. Something like:
inputEL.scrollLeft = 'auto';
Note: Manually setting the cursor in the input and then calling focus() on that input doesn't work. But something like that would be ideal.
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.
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