Tabbulation in an <input /> tag? - javascript

Is it possible to insert a tabbulation character into an input element?
The task: i have one input, the user types 6 characters, which must look like: 3 characters [empty space] 3 characters.
The problem: the left position of the second 3 characters must not change.
For example:
looks:
MMM [ ] OPS
III [ ] DOS
must look:
MMM [ ] OPS
III [ ] DOS
There must be no manipulation with the font-type.
ty

It makes no sense to me why one would have to align the input ... but I can think of a number of alternative solutions that may make sense depending on what the actual stated requirements are (i.e. what is the reason the input has to be aligned)
You could have a 6 char field (or 7 and include the space) with a "preview" to the right (or below, whatever) that formats and aligns the two 3-char codes as you type in the input field.
You could have two separate input fields, and use javascript to auto-tab between them as you type (tab right when full) or backspace (tab left when field 2 is empty)
You could also use javascript to automatically insert a tab (\t) in your field after 3 chars are typed, or when a space is typed replace it with a tab.
The approach I'd use depends entirely on what the field(s) and 3-letter codes are and why they're being input at this time. For a fixed set of codes I might use select lists instead of input.

Yea, insert a tab character "\t". You can copy-pasta it from a text editor, or use javascript to detect the tab key and use it to insert a tab char. Be careful how you override default behaviors though, as the tab key is used for accessibility purposes.

You can use the \t character escape within the input value:
$(document).ready(function() {
$("#text1").val("MMM\tOPS");
$("#text2").val("III\t\tOPS");
});
Note, however, that I had to use one tabulation character in the first text box and two tabulation characters in the second text box in order to properly align the result.

Related

Can you replace a variable and its value in all open files in visual studio code?

I was wondering if it is possible to replace all instances, in all open files of this construction time variable in visual studio code, they all have different number values after the colon. For ex. Replace all occurrences of "constructionTime":xxxxx, with "constructionTime":10,
Construction time variable
Yes it is.
Open up the edit menu then select "Find and Replace".
After that select "Replace in Files". A small dialog should open.
Under "Find Options" select "use regular expressions"
Select the "Look in" drop down, drop it open, so you can select "All Open Documents".
In the "Find what field" input, type: "constructionTime":* . <--- space after *
In the Replace with field type: "constructionTime":10 .
Then either hit Find Next and Replace on instances you wish to replace or
hit replace all.
The * is the Regular Expression Wild-Card character, and it will "find" anything it atches, that comes after it. Typically you would want to place another character after the Wild-Card, that way the search is limited, however; in your case I chose a space, but in you case you might have to try with , ; ) and the like.

jQuery check if input field characters are highlighted

Background
I have a page that has 3 input elements which takes currency numbers
These input element of type number with jQuery handles which letting up to 2 decimal placing. If user tries to input 3rd decimal, it does not print which is great.
However...
Issue
When input already has valid 2d.p input such as 12.11 and wishes to highlight the field characters (such as click drag highlight to blue) to change/overwrite all, the jQuery handler think that its 3rd decimal input and does not print BUT what it actually needs to do is to overwrite the whole and start from the beginning.
So
Is there a way to check if the input field characters are highlighted?
I know that there is a way around this if my input has type="text" and just use selectionStart and selectionEnd BUT I want to keep it as type="number".
Code: jsfiddle DEMO
Any other suggestion to jQuery code handling 2 decimal place, I would appreciate
If I am understanding your issue correctly, try the following minimal update to detect if the user has 'highlighted' the input value:
if (CharAfterdot > 3 && !window.getSelection().toString()) { return false; }
So if a 'selection' is found via the above method (not empty / undefined) the code allows further input (in your case overriding via highlight).
Updated fiddle:
https://jsfiddle.net/qtr30w05/3/

How to go to next part in Masked Input mask?

Let's say I have a mask for a text box as: aa?a-999?999
the first 2 characters are required but the third one is optional. When a user enters the first two character, does does he jump to the second part to enter the numbers?
I tried tab but it doesn't work.
If maskedinput find one ? in your mask, then everything after it will be considered optional.
jQuery.inputmask is a little bit more flexible in optional parts of the mask, you're probably going to achieve what you want with it.

How do I bind a non-breakspace(alt-288 or  ) upon pressing the space bar in javascript?

I'm using OpenMRS, it's an opensource medical records system. OpenMRS has a built-in html editor and I use this mostly in javascripting ang building the forms. In one of my forms,I have a textarea. My client would like his entries(in paragraph or in list) to be indented in the textarea.
Now when you try indenting the paragraph in the textarea then save the changes and preview the form, the paragraph becomes justified instead of retaining the indented lines.
However, if I try indenting the paragraph using ascii code for non-break space by typing   or pressing alt-288, the paragraph becomes indented thus giving me the desired result. Now, the users don't prefer typing or pressing ascii equivalents coz that'll be hassle on their part.
I'm using mostly javascript and jQuery because it's what openmrs supports. If I could somehow bind the non-break space character upon pressing a key then this will work, but I'm at a lost here. How will I do this in javascript or jquery?
One solution which might work for you is to replace leading spaces in the textarea when you process/save or even each time it changes it something like :
ta.value = ta.value.replace (/\n +/, function (m) {
return '\n' + Array (m.length).join ('&#160');
});
The Array ... constructs creates an array containing length elements then joins with your non-breakspace character effectively creating a string of that many space chars.
Another possibility is to watch for space characters entering the text-area and transforming them. See here : Can I conditionally change the character entered into an input on keypress?

Determine visible characters to be highlighted using html source

I'm using TinyMCE to let users edit and format text, output is html code.
The html is then sent to the server and is pushed to other clients that can follow the edit progress on a webpage, the html is inserted into a div so users can see the format but they are not able to edit.
Now I want the cursor position and any selection the user makes in the editor to show up on the readonly page using highlight(background color) if selected or inserting an empty span with a black border between characters to imitate the cursor position.
I made an attempt using
editor.tinymce().selection.getRng()
which gives me the start and end position of what the user sees(formatting characters are not counted)
Then I traversed the DOM and counted the characters in every text element wrapping the ones selected with a highlight span. This resulted in messy code but worked pretty well until I hit a non ascii or encoded character in the textblock.
Example html
<p>abc <b>de</b>fg</p>
looks like this to the user
abc defg
Say user selected character c to d (selection covers c, a blank, first half of the bold tag and d),
tinymce will return range start:2 end:5
but the actual characters behind would be start:5 end:16.
Just wrapping the text from char 5 to 16 in a highlight span will result in bad html.
Checking for words starting with & and ending with ; and adding number of positions will turn into a mess. There has to be a simpler way
How do I calculate how many "visible" characters a set of html character will turn into?
Or maybe you would attack the problem in another way
Thanks
PS 1
I've looked into the various jquery highlight plugins but they seem to highlight based on a search string. Those does not work in the case user selects one character and that character exists several times, they will then highlight all occurences.
I've tackled this problem in my Rangy library: the TextRange module concerns itself with the text the user sees. It sounds like you need the selectCharacters() and toCharacterRange() methods of Rangy's Range objects.

Categories