I am trying to have a text-input field that is only wide enough to handle one character.
But when the one character is typed, it grows to the left and to the right so now it can hold 2 characters.
Then, when the second character is typed grows again so that it can hold 3 characters.
This goes on and on as long as the user types in input.
How can this be done in javascript / jQuery ?
This is a good question but no easy way to do it really first you need a max-width setting in the css of your text input,
after witch you can use some jQuery like so
$("#input_id").keyup(function(){
$("body").append("<div id=\"remove_me\">"+$(this).val()+"</div>");
var width = $("#remove_me").width()+30;
$(this).animate({"width":width});
$("#remove_me").remove();
});
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.
After a lot of research, I haven't found a post with exactly the same requirements so I thought write a new post.
I'm trying to create a fixed area (e.g. 200px by 300px) where the user can enter text input. He should be able to enter any character (including line breaks).
However, he should not be able to 'write outside the box' (i.e. there shouldn't be overflow scroll or hidden for the 200x300 area).
Once user reaches the 'bottom' of the area, they can't enter any more line breaks.
And once they reach the 'bottom right' corner of the 200x300 area, they shouldn't be able to enter any more characters at all.
Is this possible in css, angular, js, jquery, etc?
Limit the length of characters with base in font and div's size, but you must change the font size and family or line height because every browser can have different styles.
To limit the length of characters in the div is need to ignore the HTML tags in the content, like interpreting.
Firstly calculate how many characters fits there.
You can restrict the number of characters per line with the cols="" attribute and set the displayed the number of editable lines with the rows="" attribute. However limiting the number of rows could only be one with the maxlength attribute which would control the number of characters you can have, which you'd have to estimate. There are some hacks to limit the number of rows with event listeners, but they seem to have fairly major bugs.
It is possible, you just need to do following:
Use event handlers to control character input process. It is required to be able to stop processing further keystrokes when limit is reached. Use keypress and keydown, first handles character processing, second - control keys processing.
Each time user presses a key, use a separate buffer to produce final result, compute its bounding rectangle, and if it is bigger than limit, prevent event handling.
Height of text body could be calculated by multiplying number of lines by line height (interpret font-size and line-height CSS properties).
Width of text body could be computed rather easy with help of HTML5 canvas measureText method.
If you don't have canvas, you can use offscreen span (or any other inline) element - just fill innerHTML with text block and use its offsetWidth attribute. Actually, if you replace line break characters with <br>, you may use span approach to get both dimensions in one go - just make sure it has same style as editable container.
ContentEditable containers, as i remember, store text body in HTML format already (in other words - with <br>s instead of line break characters).
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.
This question already has answers here:
jQuery - auto size text input (not textarea!) [duplicate]
(9 answers)
Is there a jQuery autogrow plugin for text fields?
(10 answers)
Closed 4 years ago.
I want to increase the width of input text field automatically if a user inputs some text in it. But how to do it. Please help me.Can it be using Jquery or javascript
Thanks.
Try with this:
<script>
function adjustWidth(obj) {
obj.style.width = (obj.value.length) * 7.3 + "px";
}
</script>
<input type="text" onkeypress="adjustWidth(this)">
However this depends on text size, font, etc
The width cannot be increased as precisely as the width of character vary from one another.
But still, you can do something like this
$("input:text").keyup(function() {
$(this).css('width', $(this).val().length*10);
});
Demo
As you can see I am assuming that for every character the field size has to be increased by 10px. This is very hard to assign a correct ration that fits all the characters.
You mean something like
DEMO
<input style="width:100px" onkeyup="var len = this.value.length;
if (len>10) {
this.style.width=(parseInt(this.style.width)+10)+'px';
}" />
Actually, you can do it precisely. You do this by opening an absolutely-positioned div off-screen with the same font as your textbox and populating it with the text of your textbox on keyup. You then take the width of that div (which will conform to the text) and set your textbox to that width.
Note that the div needs to be off-screen (left:-9999px), not hidden (display:none) or it won't work since the browser needs to render the text in order to calculate the width. Also, setting the text of the div to your textbox contents plus a trailing space will help ensure that your textbox is always one character larger than needed, accounting for any lag between the key being displayed and the width being updated.
After the break I'll post a modified version of James Padolsey's JQuery Autoresize script that works with textareas to first resize the width to some maximum size, then the height once the text wraps. It's not exactly what you are looking for, but it might help.
If I have a string in a div
<div id="article">
lots of text goes here
<strong> it's really interesting</strong>
and it's free to read
</div>
if a user double click or single click on a particular word, is there a way to determine the position/index of the character clicked?
If that cannot be done, how about determining how many space character there are before the clicked position. So if I click on the word 'goes' in the above example, it returns 3 because there are three spaces before the word goes which is clicked.
Thank You very much for your time.
The ugly hack solution to such a problem involves programming converting the characters into event capturing objects.
For instance
<div id="article">
<span>lots </span><span>of </span><span>text</span>...
</div>
Now this can be done programmatically.
You can grab whatever the current content of a div and convert it to something like the formatting above. Then attach event handlers to the contained spans which count the number of spans preceding it in the same container.
a way to determine the position/index of the character clicked
Well, first I need to use a fixed width size font like Courier.
Then, I'd create two span with only a char each. With those two, I should be able to know the width of a char (beware padding and margin) and its height.
Then, you need to know your upper left coordinates for your div whose id is 'article' and capture click event with event.x and event.y.
After that,
var line = (event.x - divLeft) / charHeight;
var column = (event.y - divTop) / charWidth;