We Keep Coding

I'm using Javascript for automatically adding hyphens to phone number. Need to modify this to also remove hyphens automatically, or find a new fix

I found a very useful bit of JS from another thread for automatically hyphenating numbers, but a by-product of that is that now they've entered 10 numbers (US phone number) but if they want to delete and change it, they will have to delete the hyphens as well. I realize this is not a huge deal but it's annoying me and I wanted to find a better solution.
A couple of different options come to mind, just not sure what is possible:
Add/modify my code so that as they delete, it automatically removes the hyphens as they delete their numbers, so they are only pressing backspace 10 times instead of 12.
Have the appearance of hyphens in the text box but they are not actually in the text input area...just like a "background image" so to speak. I tried to do this with a background SVG for the text area but I was not able to solve the problem of automatically spacing out the phone number around the fake hyphens. As for this possible solution, I am fine with these being there all the time even before anything is typed, or appearing once they begin typing the number.
I have searched extensively but have not found anything for what I need. I am sure that a thread already exists but I just haven't searched for the right terms. if anyone has a link to one, even that would be amazing.
Here is my existing code...hopefully this is something I can accomplish with adding something simple. Any help is greatly appreciated.
$('#phone').keyup(function(){
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
});

Since the number is only formatted when a minimum of ten numbers are entered, you can try something like this.
$('#phone').keyup(function(){
if( $(this).val().length < 10 ){
$(this).val($(this).val().replace(/-/g, ''))
}else{
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="phone">

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.

jquery autocomplete on last word

I'm trying to edit this js code so that the autocomplete function kicks in after each non-breaking space; regardless of whether or not the text entered before each non-breaking space was one of the tags. So, for example, if I enter PHP, that's one of the tags. But, if for the next text that I enter, it must be one of the tags too otherwise anything that I enter after PHP will not activate the autocomplete. You can find this example on jsfiddle

I think that you're looking for a plugin like this one:
http://levycarneiro.com/projects/tag-it/example.html
- or -
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Basically you need to look for "jQuery Autocomplete Tags" instead of just "jQuery Autocomplete".

Tabbulation in an <input /> tag?

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.

TinyMCE Plugin building

I am working on modifying an existing spell check plugin for TinyMCE.
This is what is supposed to happen:
1. User hits "space" and the spell check runs.
2. If the word is spelled wrong the word gets wrapped with a span and gets a red underline
what I find happening is that when the user hits space bar the word does get spell checked but the cursor pops back to the end of the word just typed (instead of to where the space is) (you can see this in action at http://mail.solidhouse.com/webmail2/test.html)
here is my pseudcode:
var b = this.editor.selection.getBookmark();
//for each node
node.nodeValue.replace(r5, '$1$2');
this.editor.selection.moveToBookmark(b);
what I am suspecting is that moveToBookmark keeps the cursor within the element but I have no idea what to do to remedy this.
(I have tried incrementing b.start and b.end but that did not work)
I know this is hard to explain. Any thoughts on this are greatly appreciated.

try incrementing the bookmark start/end by 2 instead of 1 if you haven't already. since the underline adds a tag around the mispelled words, that's an additional 2 places that need to be accounted for in the bookmark: 1 for each side of the span.

Can you get yourself out of the element by grabbing its parent?
this.parentNode.moveToBookmark(b);
Or something like that.