Skip to content

Commit

Permalink
feat: contenteditable support
Browse files Browse the repository at this point in the history
  • Loading branch information
@emreerkan
emreerkan committed Jun 18, 2023
1 parent 9d41035 commit 976749e
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 31 deletions.
12 changes: 9 additions & 3 deletions README.MD
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
# jQuery insertAtCaret

A jQuery plugin which inserts text to a text input or a textarea field at the caret's position.
A jQuery plugin which inserts text to a text input, a textarea or a tag with
`contenteditable="true"` at the caret's position.

Base code from: http://stackoverflow.com/a/1064139/84042

## Usage

If your text field contained 'Foo Bar' with the cursor positioned after 'Foo' then the following code would result in 'FooBar Bar':
If your text field contains 'Foo Bar' with the cursor positioned after 'Foo'
then the following code would result in 'FooBar Bar':

```
$('textarea').insertAtCaret('Bar');
```

## Changelog

[1.2.0] - 2023-06-18

* Now it supports elements with `contenteditable="true"`

[1.1.5] - 2017-06-05

* If any text is selected, plugin overrides that selected part of the text with new text
Expand Down Expand Up @@ -47,7 +53,7 @@ $('textarea').insertAtCaret('Bar');

## License

Copyright (c) 2013 [İzzet Emre Erkan](http://www.karalamalar.net/)
Copyright (c) 2023 [Emre Erkan](http://www.karalamalar.net/)
Licensed under GPLv2 or later.

Contributors:
Expand Down
2 changes: 1 addition & 1 deletion insert-at-caret.jquery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"text",
"input"
],
"version": "1.1.5",
"version": "1.2.0",
"author": {
"name": "Emre Erkan",
"url": "http://www.karalamalar.net"
Expand Down
35 changes: 22 additions & 13 deletions jquery.insert-at-caret-vsdoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*!
* jQuery insertAtCaret 1.1.5
* jQuery insertAtCaret 1.2.0
* http://www.karalamalar.net/
*
* Copyright (c) 2013 İzzet Emre Erkan
* Copyright (c) 2023 Emre Erkan
* Licensed under GPLv2 or later.
* http://www.gnu.org/licenses/gpl-2.0.txt
*
Expand All @@ -14,48 +14,57 @@
(function ($, document, window, undefined) {
$.fn.insertAtCaret = function (text) {
/// <summary>
/// A jQuery plugin which inserts text to a text input or
/// a textarea field at caret's position.
/// A jQuery plugin which inserts text to a text input, textarea
/// or contentEditable element at caret position.
/// </summary>
/// <returns type="jQuery" />
return this.each(function () {
var input = this, scrollPos, strPosStart = 0, strPosEnd = 0, isModernBrowser = ("selectionStart" in input && "selectionEnd" in input), before, after, range, selection;

if (!((input.tagName && input.tagName.toLowerCase() === "textarea") || (input.tagName && input.tagName.toLowerCase() === "input" && input.type.toLowerCase() === "text"))) {
if (input.contentEditable) {
selection = document.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(text));
selection.collapseToEnd();
}
}
return;
}

scrollPos = input.scrollTop;
input.focus();

if (isModernBrowser) {
strPosStart = input.selectionStart;
strPosEnd = input.selectionEnd;
} else {
input.focus();
range = document.selection.createRange();
range = input.createTextRange();
range.moveStart('character', -input.value.length);
strPosStart = range.text.length;
}

if (strPosEnd < strPosStart)
if (strPosEnd < strPosStart) {
strPosEnd = strPosStart;
}

before = (input.value).substring(0, strPosStart);
after = (input.value).substring(strPosEnd, input.value.length);
input.value = before + text + after;
strPosStart = strPosStart + text.length;

if (isModernBrowser) {
input.selectionStart = strPosStart;
input.selectionEnd = strPosStart;
input.setSelectionRange(strPosStart, strPosStart);
} else {
range = document.selection.createRange();
range.moveStart('character', strPosStart);
range.moveEnd('character', 0);
range = input.createTextRange();
range.move('character', strPosStart);
range.select();
}

input.scrollTop = scrollPos;
input.blur();
});
};
})(jQuery, document, window);
})(jQuery, document, window);
29 changes: 19 additions & 10 deletions jquery.insert-at-caret.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*!
* jQuery insertAtCaret 1.1.5
* jQuery insertAtCaret 1.2.0
* http://www.karalamalar.net/
*
* Copyright (c) 2013 İzzet Emre Erkan
* Copyright (c) 2023 Emre Erkan
* Licensed under GPLv2 or later.
* http://www.gnu.org/licenses/gpl-2.0.txt
*
Expand All @@ -17,40 +17,49 @@
var input = this, scrollPos, strPosStart = 0, strPosEnd = 0, isModernBrowser = ("selectionStart" in input && "selectionEnd" in input), before, after, range, selection;

if (!((input.tagName && input.tagName.toLowerCase() === "textarea") || (input.tagName && input.tagName.toLowerCase() === "input" && input.type.toLowerCase() === "text"))) {
if (input.contentEditable) {
selection = document.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(text));
selection.collapseToEnd();
}
}
return;
}

scrollPos = input.scrollTop;
input.focus();

if (isModernBrowser) {
strPosStart = input.selectionStart;
strPosEnd = input.selectionEnd;
} else {
input.focus();
range = document.selection.createRange();
range = input.createTextRange();
range.moveStart('character', -input.value.length);
strPosStart = range.text.length;
}

if (strPosEnd < strPosStart)
if (strPosEnd < strPosStart) {
strPosEnd = strPosStart;
}

before = (input.value).substring(0, strPosStart);
after = (input.value).substring(strPosEnd, input.value.length);
input.value = before + text + after;
strPosStart = strPosStart + text.length;

if (isModernBrowser) {
input.selectionStart = strPosStart;
input.selectionEnd = strPosStart;
input.setSelectionRange(strPosStart, strPosStart);
} else {
range = document.selection.createRange();
range.moveStart('character', strPosStart);
range.moveEnd('character', 0);
range = input.createTextRange();
range.move('character', strPosStart);
range.select();
}

input.scrollTop = scrollPos;
input.blur();
});
};
})(jQuery, document, window);
6 changes: 3 additions & 3 deletions jquery.insert-at-caret.min.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*!
* jQuery insertAtCaret 1.1.5
* jQuery insertAtCaret 1.2.0
* http://www.karalamalar.net/
*
* Copyright (c) 2013 İzzet Emre Erkan
* Copyright (c) 2023 Emre Erkan
* Licensed under GPLv2 or later.
* http://www.gnu.org/licenses/gpl-2.0.txt
*
Expand All @@ -11,4 +11,4 @@
* [@Nils-Berghs](https://github.com/Nils-Berghs)
*
*/
!function (e, t) { e.fn.insertAtCaret = function (e) { return this.each(function () { var a, n, o, r, c = this, l = 0, s = 0, i = "selectionStart" in c && "selectionEnd" in c; (c.tagName && "textarea" === c.tagName.toLowerCase() || c.tagName && "input" === c.tagName.toLowerCase() && "text" === c.type.toLowerCase()) && (a = c.scrollTop, i ? (l = c.selectionStart, s = c.selectionEnd) : (c.focus(), (r = t.selection.createRange()).moveStart("character", -c.value.length), l = r.text.length), s < l && (s = l), n = c.value.substring(0, l), o = c.value.substring(s, c.value.length), c.value = n + e + o, l += e.length, i ? (c.selectionStart = l, c.selectionEnd = l) : ((r = t.selection.createRange()).moveStart("character", l), r.moveEnd("character", 0), r.select()), c.scrollTop = a) }) } }(jQuery, document, window);
!(function($,c,d,e){$.fn.insertAtCaret=function(b){return this.each(function(){var a=this,scrollPos,strPosStart=0,strPosEnd=0,isModernBrowser=("selectionStart"in a&&"selectionEnd"in a),before,after,range,selection;if(!((a.tagName&&a.tagName.toLowerCase()==="textarea")||(a.tagName&&a.tagName.toLowerCase()==="input"&&a.type.toLowerCase()==="text"))){if(a.contentEditable){selection=c.getSelection();if(selection.getRangeAt&&selection.rangeCount){range=selection.getRangeAt(0);range.deleteContents();range.insertNode(c.createTextNode(b));selection.collapseToEnd()}}return}scrollPos=a.scrollTop;a.focus();if(isModernBrowser){strPosStart=a.selectionStart;strPosEnd=a.selectionEnd}else{range=a.createTextRange();range.moveStart('character',-a.value.length);strPosStart=range.text.length}if(strPosEnd<strPosStart){strPosEnd=strPosStart}before=(a.value).substring(0,strPosStart);after=(a.value).substring(strPosEnd,a.value.length);a.value=before+b+after;strPosStart=strPosStart+b.length;if(isModernBrowser){a.setSelectionRange(strPosStart,strPosStart)}else{range=a.createTextRange();range.move('character',strPosStart);range.select()}a.scrollTop=scrollPos;a.blur()})}})(jQuery,document,window);
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "insert-at-caret",
"version": "1.1.5",
"version": "1.2.0",
"description": "A jQuery plugin which inserts text to a text input or a textarea field at the caret's position.",
"main": "jquery.insert-at-caret.js",
"scripts": {
Expand Down

0 comments on commit 976749e

Please sign in to comment.