How to make dots on input PIN showing character amount to provide? - javascript

I need to create input with dots showing amount of characters required, and to hide one after other when characters provided:
What is the best way to do this?
I haven't come up with anything smart but drawing circles with position: absolute and add/remove them with js (on keydown or change). But that could fail, because of difference of character width (for ex. i and W)

Because #Santi proposed you the solution with jQuery, I've made a jsFiddle with usage of angular.
<div ng-controller="MyCtrl">
<span class="mask">•••••</span>
<span class="hider">{{val}}</span>
<input type="text" class="code" ng-model="val" maxlength="5" />
</div>
So I've created input which has no border and outline.
Below it on the bottom there is a span mask which has dots that you want. And above mask there is a hider where angular writes value from input so the background rise with the content and hide dots in mask span.
If you use angular in your project you could probably change my jsFiddle to directive.
Additionally IMHO it could be easly changed to jQuery option or even to pure javascript;
PS. Please be respectful for me, because I'm not very best in css.

If you set the font-family of your input field to a monospace font, for example Courier, every character will be the same size. Then you can size your dots based on the ch unit. 1ch is the width of the 0 character (and thus every character in a monospace font).
If you don't want to draw circles, you might be able to use JavaScript to swap out bullets (•) each time a new character is input.

I think your easiest and cleanest method might be implementing something like MasekdInput. Check out the Demo section towards the bottom.
It's a JQuery plugin that puts placeholders into your inputs, and allows you to specify the placeholder character. By default it's _, but you could easily change it to be • by doing the following...
$("#myTextField").mask("*****",{placeholder:"•"});

Related

How can I reverse the input text in html? [duplicate]

For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.
setting the css property to
text-align:right
didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added
direction:RTL
Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.
How do I fix this? please help..
For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar
You can use the dir="rtl" on the input. It is supported.
<input dir="rtl" id="foo"/>
Here's what I can think of:
Use direction:RTL for the RIGHT alignment
Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).
function rtl(element)
{
if(element.setSelectionRange){
element.setSelectionRange(0,0);
}
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>
This code will do.
Simply use this CSS, this will change your text field and cursor position from right to left.
input, textarea {
unicode-bidi:bidi-override;
direction: RTL;
}
Use only direction:RTL and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.
A feature specific to Angular Material, in addition to direction: rtl, is :
.mat-form-field {
text-align: start!important;
}
This will work for both RLT & LTR
A better, more user-friendly way to do this is to set the dir attribute to auto.
<input dir="auto" id="foo"/>
This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically
See here for more information on the dir attribute
Use on the input in css.
input {
unicode-bidi:bidi-override;
direction: RTL;
}
It works for Chrome browser.
Use a div element and make it editable.
<div contenteditable="true">
</div>

Restrict user input to fixed width and height contenteditable div

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 anyway to set the letter-spacing automatic based on the div width?

I have a fluid width website where I planned to place some text inside <div>. The idea is
<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>
I need to display all the three lines to look like a justified LETTERS, by adding letter spacing dynamically based upon the content inside and available out <div> width.
You could compute the widths of the texts in JavaScript, then calculate the letter spacing needed, and add it. Note that this would treat word space like any other character, so the more spacing is added, the closer to each other would words appear to be. The results would be typographically questionable in other ways, too: words don’t look good if letters get too spaced.
If just a little spacing would be needed, it’s usually better to add word spacing, and you could do that for some browsers (not Chrome) with text-align-last: justify. You could consider using additionally text-justify: newspaper, as it may put part of the added spacing between letters, not just between words. See jsfiddle.
I would suggest you to try this..give three different classes to the lines ie first_line, second_line and similarly third_line
Then write css for the classes. for first_line u keep the letter-spacing to wat u want. similarly u can give letter spacing for the other two lines as well.

How to measure word/caret position in Google Docs?

For those who haven't worked with the Google Docs editor here's a short explanation of how it works:
Google Docs has no visible editable textarea or contentEditable elements.
Google Docs listens for keydown/press/up in a separate iFrame where they place the OS cursor for event listening.
When the iFrame catches an event Google handles it by performing the equivalent operations on the visible document.
The "caret" in Google Docs is a DIV that is styled and scripted to look and act like an OS cursor.
With that out of the way, here's my request:
I'm working on a plugin that interacts with the Google Doc and I need to be able to do two things:
Highlight words with an opaque overlay DIV.
Determine cursor position inside a word.
I've been exhausting a lot of ideas about just how to handle this, but so far I've only manage to get a buggy solution for the latter problem (I perform a backspace, determine where the text changed and undo the backspace).
I'm looking for all the best ideas you can come up with to solve these problems. They don't need to be cross browser, but they do need to be able to be turned into something robust that will also handle things such as font size changed mid line.
A little bit of extra info explaining what a Google Doc looks like in HTML:
<wrapper> // Simplified wrapper containing margins, pagination and similar
<div class="kix-paragraphrenderer"> // single DIV per page wrapping all content
// Multiple paragraphs separated by linebreak created by Enter key:
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">
// Multiple wrapper divs created by Google's word wrapping:
<div class="kix-lineview">...</div>
<div class="kix-lineview">...</div>
<div class="kix-lineview">
// Single inner wrapper, still full width of first wrapper paragraph:
<div class="kix-lineview-content">
// Single wrapper SPAN containing full text of the line, but not display:block
<span class="kix-lineview-text-block">
// Multiple spans, one per new font change such as normal/bold text,
// change in font size, indentation and similar:
<span>This is normal text</span>
<span style="font-size:40px; padding-left:4px;">This larger text.</span>
<span style="font-weight:bold; padding-left:10px;">This is bold text</span>
<span style="padding-left:4px;">More normal text</span>
</span>
</div>
</div>
</div>
</div>
</wrapper>
After more tinkering I came to the conclusion that it is extremely troublesome - if not impossible - to try and programmatically determine cursor position with regard to a letter inside a <span>, simply because the <span> is the smallest element that is measurable (correct me if I am wrong).
So how to solve the problem? Here's what I ended up doing:
I create an offscreen positioned <div>
I get the text of the current paragraph (<div class="kix-paragraphrenderer">) - I could get the entire text, but wanted to limit the computational load.
I extract each single character of the paragraph by looping through its children in the following way:
Loop through linveviews of the paragraph (<div class="kix-lineview">)
Get the lineview content (<div class="kix-lineview-content">)
Loop through text blocks of the lineview content (<span class="kix-lineview-text-block">)
Loop through <span>'s of the text block
Loop through innerText of the <span>
I append each character in my offscreen <div> with the currently applied style extracted from style.cssText of the current <span>
For each character appended I measure the width of the <div> and save this in an array. I now have a position of each single character.
I measure the position of the cursor relative to my widths and voila - I know where the cursor is positioned in the text.
This is obviously a bit simplied (I left out details about margins and paddings of the different elements), but it covers the idea behind how it's possible to get the cursor position.
It works quite well, but there are many pitfalls and a lot of measuring required. On top of that it's also required to post-parse the text if you want to use it for anything, since tabs, spaces and linebreaks aren't always included in innerText (depending on where these are in the text, Google may or may not make them through positioning of new elements).
I made something like Kix two years ago Google Docs. And for any HTML design and yes, for IE6 too :-) How? All we need is to compute letter absolute position. How? Replace textNode with inline element without layout, that's important, and then use Element.getClientRects I remember I also needed wrap just letter and compute its position via fast and reliable https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
The trick how to detect lines and wraps for home and end keys was based on some vertical heuristic letter position change. Something like if base line is different, than stop caret walking. It was pretty fast and with any markup and without any caching. Holy grail :)
The only not resolvable problem was justified text, because letters were distributed randomly and spaces between them was not computable.
That project is dead http://webeena.com now. Bad management killed it (and me almost too).

JavaScript: Truncating text based on outer object's dimensions

I want to, using JavaScript, chop the given text to fit the object in which the text resides and add "..." at the end.
For example:
JavaScript got data from 3rd party web service and needs to put the text into 200 x 300 px div. Text's length vary, so let's say it will take much more space than provided.
How to determine at which point text will break through the border and prevent that by chopping text and adding "..." at the end?
There are several jQuery plugins that can do this.
If you don't mind using the canvas element, it can be used to measure the width of the text. Here's an example:
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html
ruzee.com has a solution that uses prototype.js and a small bit of code [MIT licensed] to do what you want; demo
You may also want to look into the CSS 3 property text-overflow which also does this.
http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props
It's possible to check if the browser supports it, so you always can add a JavaScript fall back.
if (!'textOverflow' in document.createElement('div').style) {
// Use JavaScript solution here
}

Categories