We Keep Coding

Replace multiple letters maintaining the correct cursor position

I'm trying to replace "abc" to "d" for instance.
Example code replaces only one letter at cursor position but I need to replace multiple letters with the same idea.
$("#text").keypress(function(event) {
if (event.key === "a") {
event.preventDefault();
insertTextAtCursor(this, "b");
}
});
function insertTextAtCursor(el, text) {
var val = el.value, endIndex, range;
if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
endIndex = el.selectionEnd;
el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
el.selectionStart = el.selectionEnd = endIndex + text.length;
} else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
el.focus();
range = document.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text"></textarea>
Any help ?

Quite simple, the issue here is that we need to be able to read the input's value, instead of the pressed keys.
//All the words that you need to place :)
let wanted = [
"abc",
"omg",
"x"
];
let replaceBy = "Test!";
$("#text").keyup((event) => {
let old = $("#text").val();
$("#text").val(old.replace(new RegExp(wanted.join('|'), "gi"), replaceBy));
});
There you got a testable fiddle, you can even replace multiple words/characters.
https://jsfiddle.net/fr24napw/24/
Hope it helps!

Creating hashtags in contenteditable with keypress

Edit: code below only works in Chrome/Opera
I've modified the code found here to create hashtags in a contenteditable using the keypress event. Basically, whenever someone types the hash (#) symbol, a span tag (styled via Bootstrap and other css) is immediately created and closes whenever a space or any punctuation character is pressed. That's the long and short of it.
Here's my code:
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
// closes the span housing the hashtag
function closeSpan(){
var span = document.createElement("span");
span.setAttribute("data-role", "remove");
span.setAttribute("class", "delHashtag");
span.setAttribute("aria-hidden", "true");
return span;
}
$(document).ready(function() {
var hashtags = false;
$(document).on('keypress', '#myInputField', function(e) {
var input_field = $(this);
var x = e.which || e.keyCode;
if (x == 32){ // space key
if(hashtags){
e.preventDefault();
input_field.html(input_field.html() + "</span> ");
placeCaretAtEnd(this);
hashtags = false;
document.getElementsByClassName("new")[0].setAttribute("contenteditable", false);
document.getElementsByClassName("new")[0].appendChild(closeSpan());
}
}
if (x == 35){ // hash key (#)
e.preventDefault();
$(".tag").removeClass("new");
input_field.html(input_field.html() + "<span class='tag label label-info new'>#");
placeCaretAtEnd(this);
hashtags = true;
}
// various punctuation characters
if (x == 8 || x == 9 || x >=16 && x <= 18 || x == 27 || x == 33 || x == 34 || x >= 36 && x <= 47 || x >= 58 && x <= 64 || x >= 91 && x <= 94 || x == 96 || x >= 123 && x <= 126) {
if(hashtags) {
e.preventDefault();
input_field.html(input_field.html() + "</span>" + String.fromCharCode(x));
placeCaretAtEnd(this);
hashtags = false;
document.getElementsByClassName("new")[0].setAttribute("contenteditable", false);
document.getElementsByClassName("new")[0].appendChild(closeSpan());
}
}
if(x == 13){// return key
document.execCommand('defaultParagraphSeparator', false, 'p');
}
});
$(document).on("click", ".delHashtag", function() {
this.parentNode.parentNode.removeChild(this.parentNode);
return false;
});
});
#myInputField {
border:1px solid #ddd;
padding: 10px;
font-size: 14px;
}
.tag span[data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.tag span[data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="myInputField" contenteditable="true"></div>
Hashtags are created as expected. However, should you click somewhere else in the text and try to create a hashtag, it isn't created where the cursor is. Instead, the hashtag goes to the end of the contenteditable. Not good.
I haven't been able to figure this out. Sure, there are other problems with the code (i.e. no validation of hashtags; first hashtag created after pressing return appears on another line (doesn't remain inside p/div tag)), but I'm focused on this one issue for now.
Could a Javascript ninja give me a hand? I'd really appreciate it.

Can I return a string into an input type: text field onkeypress?

I have a sentence defined as a list(a string? an array?- I'm not sure the correct term) that I want returned sequentially as any key is pressed. I'm trying to use .split. Here is the list and function:
var list1 = "This is a test".replace(/\s/g, "\xA0").split("")
function transformTypedChar(charStr) {
var position = $("#verse1").text().length;
if (position >= list1.length) return '';
else return list1[position];
}
Currently, the "T" from the beginning of the list is returned repeatedly, and the rest of the list is ignored. I'm calling the function as follows:
document.getElementById("verse1").onkeypress = function(evt) {
var val = this.value;
evt = evt || window.event;
// Ensure we only handle printable keys, excluding enter and space
var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
if (charCode && charCode > 32) {
var keyChar = String.fromCharCode(charCode);
// Transform typed character
var mappedChar = transformTypedChar(keyChar);
var start, end;
if (typeof this.selectionStart == "number" && typeof this.selectionEnd ==
"number") {
// Non-IE browsers and IE 9
start = this.selectionStart;
end = this.selectionEnd;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
// Move the caret
this.selectionStart = this.selectionEnd = start + 1;
} else if (document.selection && document.selection.createRange) {
// For IE up to version 8
var selectionRange = document.selection.createRange();
var textInputRange = this.createTextRange();
var precedingRange = this.createTextRange();
var bookmark = selectionRange.getBookmark();
textInputRange.moveToBookmark(bookmark);
precedingRange.setEndPoint("EndToStart", textInputRange);
start = precedingRange.text.length;
end = start + selectionRange.text.length;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
start++;
// Move the caret
textInputRange = this.createTextRange();
textInputRange.collapse(true);
textInputRange.move("character", start - (this.value.slice(0,
start).split("\r\n").length - 1));
textInputRange.select();
}
return false;
}
};
How do I return the entire list, sequentially? In other words, on the first key event the "T" appears, on the second key event, the "h" appears and so on. I can achieve this in contenteditable divs, but I'm using input type: text fields as I want to autotab between.
The entire code is here: http://jsfiddle.net/NAC77/9/

Calling $(el).text() on input elements returns an empty string, you should be calling $(el).val(): http://jsfiddle.net/NAC77/10/

How do I insert some text where the cursor is? [duplicate]

This question already has answers here:
Inserting a text where cursor is using Javascript/jquery
(13 answers)
Closed 7 years ago.
I'm upgrading some Javascript which works on IE. However, I'm having some problems.
Heres the IE code:
var range = document.getElementById('text').contentWindow.window
.document.getElementById('Content').createTextRange();
var textObj = document.getElementById('text').contentWindow.window
.document.getElementById('Content');
var textFieldValue = theSmile;
if (range && textObj.CursorPos) {
var CursorPos = textObj.CursorPos;
CursorPos.text = CursorPos.text.charAt(CursorPos.text.length - 1)
== ' ' ?' ' + textFieldValue : textFieldValue;
} else {
textObj.value = textFieldValue;
}
I've tried replacing CreateTextRange with CreateRange for non-IE browsers, but this doesn't help. With code like this:
var range;
var textObj;
var iframeEl = document.getElementById('text');
if (iframeEl.contentDocument) { // DOM
range = iframeEl.contentDocument.getElementById('Content').createRange;
textObj= iframeEl.contentDocument.getElementById('Content');
} else if (iframeEl.contentWindow) { // IE win
range = iframeEl.contentWindow.document.getElementById('Content')
.createTextRange;
textObj= iframeEl.contentWindow.document.getElementById('Content');
}

Here's a function to insert text at the cursor in a textarea or text input, which is what it seems you have. It works in all major browsers:
function insertTextAtCursor(el, text) {
var val = el.value, endIndex, range, doc = el.ownerDocument;
if (typeof el.selectionStart == "number"
&& typeof el.selectionEnd == "number") {
endIndex = el.selectionEnd;
el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
el.selectionStart = el.selectionEnd = endIndex + text.length;
} else if (doc.selection != "undefined" && doc.selection.createRange) {
el.focus();
range = doc.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
}
}
You can use it as follows:
var iframeWin = document.getElementById('text').contentWindow;
var textObj = iframeWin.document.getElementById('Content');
insertTextAtCursor(textObj, "foo");

Getting Deleted character

in in Input field, if the user presses Backspace or Delete key, is there a way to get the deleted character.
I need to check it against a RegExp.

Assuming the input box has an id 'input'. Here is how with least amount of code you can find out the last character from the input box.
document.getElementById("input").onkeydown = function(evt) {
const t = evt.target;
if (evt.keyCode === 8) { // for backspace key
console.log(t.value[t.selectionStart - 1]);
} else if (evt.keyCode === 46) { // for delete key
console.log(t.value[t.selectionStart]);
}
};
<input id="input" />

The following will work in all major browsers for text <input> elements. It shouldn't be used for <textarea> elements because the getInputSelection function doesn't account for line breaks correctly in IE. See this answer for a (longer) function that will do this.
function getInputSelection(input) {
var start = 0, end = 0;
input.focus();
if ( typeof input.selectionStart == "number" &&
typeof input.selectionEnd == "number") {
start = input.selectionStart;
end = input.selectionEnd;
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range) {
var inputRange = input.createTextRange();
var workingRange = inputRange.duplicate();
var bookmark = range.getBookmark();
inputRange.moveToBookmark(bookmark);
workingRange.setEndPoint("EndToEnd", inputRange);
end = workingRange.text.length;
workingRange.setEndPoint("EndToStart", inputRange);
start = workingRange.text.length;
}
}
return {
start: start,
end: end,
length: end - start
};
}
document.getElementById("aTextBox").onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
var deleteKey = (keyCode == 46), backspaceKey = (keyCode == 8);
var sel, deletedText, val;
if (deleteKey || backspaceKey) {
val = this.value;
sel = getInputSelection(this);
if (sel.length) {
deletedText = val.slice(sel.start, sel.end);
} else {
deletedText = val.charAt(deleteKey ? sel.start : sel.start - 1);
}
alert("About to be deleted: " + deletedText);
}
};

No, there is no variable that stores the deleted char. Unless you have a history for Undo/Redo, but it would be difficult to get the information out of that component.
Easiest would be to compare the contents of the input field before and after delete/backspace have been pressed.

You could try something with the caret position:
function getCaretPosition(control){
var position = {};
if (control.selectionStart && control.selectionEnd){
position.start = control.selectionStart;
position.end = control.selectionEnd;
} else {
var range = document.selection.createRange();
position.start = (range.offsetLeft - 1) / 7;
position.end = position.start + (range.text.length);
}
position.length = position.end - position.start;
return position;
}
document.getElementById('test').​​​​onkeydown = function(e){
var selection = getCaretPosition(this);
var val = this.value;
if((e.keyCode==8 || e.keyCode==46) && selection.start!==selection.end){
alert(val.substr(selection.start, selection.length));
} else if(e.keyCode==8){
alert(val.substr(selection.start-1, 1));
} else if(e.keyCode==46){
alert(val.substr(selection.start, 1));
}
}​
Tested on Chrome 6. See jsFiddle for an example