8

Summary:

I am trying to achieve the effect where when user types a ( or [ in the content-editable div, the second ) or ] is auto-inserted, and the caret be positioned between the two of them, that is, between ( and ).

FIDDLE

Type to the right of the --s and see how in the first line it works while doesn't work in the second.

My effort:

I am using this code (by Tim Down) to both highlight some part of text and set cursor position. The former works but latter doesn't :(

function getTextNodesIn(node) { // helper var textNodes = []; if (node.nodeType == 3) { textNodes.push(node); } else { var children = node.childNodes; for (var i = 0, len = children.length; i < len; ++i) { textNodes.push.apply(textNodes, getTextNodesIn(children[i])); } } return textNodes; } function highlightText(el, start, end) { // main if (el.tagName === "DIV") { // content-editable div var range = document.createRange(); range.selectNodeContents(el); var textNodes = getTextNodesIn(el); var foundStart = false; var charCount = 0, endCharCount; for (var i = 0, textNode; textNode = textNodes[i++];) { endCharCount = charCount + textNode.length; if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) { range.setStart(textNode, start - charCount); foundStart = true; } if (foundStart && end <= endCharCount) { range.setEnd(textNode, end - charCount); break; } charCount = endCharCount; } var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else { // textarea el.selectionStart = start; el.selectionEnd = end; } }

Notes:

  1. <div> will have child elements (mostly <br>s).
  2. Only Chrome support required using vanilla JS

My question:

  1. Why doesn't the above function work?
  2. How can it be made to work?

I have spent hours searching for this and found nothing much useful. Some were about setting at start or end of a child div but for me it can be any location, anywhere.

UPDATE:

Thanks to everyone is finally finished development!

Improve this question

2 Answers 2

Reset to default
13

Here's a much simpler approach. There are a few things to note:

  • keypress is the only key event in which you can reliably detect which character has been typed. keyup and keydown won't do.
  • The code handles the insertion of parentheses/braces manually by preventing the default action of the keypress event.
  • The selection/caret stuff is simple when using DOM methods.
  • This won't work in IE <= 8, which have different range and selection APIs. If you need support for those browsers, I'd suggest using my own Rangy library. It is possible without it but I really don't want to write the extra code.

Demo:

http://jsfiddle.net/HPeb2/

Code:

var editableEl = document.getElementById("editable"); editableEl.addEventListener("keypress", function(e) { var charTyped = String.fromCharCode(e.which); if (charTyped == "{" || charTyped == "(") { // Handle this case ourselves e.preventDefault(); var sel = window.getSelection(); if (sel.rangeCount > 0) { // First, delete the existing selection var range = sel.getRangeAt(0); range.deleteContents(); // Insert a text node at the caret containing the braces/parens var text = (charTyped == "{") ? "{}" : "()"; var textNode = document.createTextNode(text); range.insertNode(textNode); // Move the selection to the middle of the inserted text node range.setStart(textNode, 1); range.setEnd(textNode, 1); sel.removeAllRanges(); sel.addRange(range); } } }, false);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Interesting solution. I will experiment with this in 2-3 days.
Thanks! This was exactly what I needed! P.S. Do you have any suggestion/answer to overcome the limitations of getCaretPosition function I have?
5

To accompish the goal stated in your summary, try altering the node value at the current cursor position. Since your code is attached to a keyup event, you can be assured that the range is already collapsed and on a text node (all of that happens on key down, which would have already fired).

function insertChar(char) { var range = window.getSelection().getRangeAt(0); if (range.startContainer.nodeType === Node.TEXT_NODE) { range.startContainer.insertData(range.startOffset, char); } } function handleKeyUp(e) { e = e || window.event; var char, keyCode; keyCode = e.keyCode; char = (e.shiftKey ? { "222": '"', "57": ')', "219": '}' } : { "219": "]" })[keyCode] || null; if (char) { insertChar(char); } } document.getElementById("editable").onkeyup = handleKeyUp;

Fiddle

Also, I see that you were using innerHTML to set the new value (in Element.prototype.setText). This sounds alarming to me! innerHTML totally nukes whatever contents were previously in the container. Since the cursor is bound to a particular element, and those elements just got nuked, what is the browser supposed to do? Try to avoid using this if you care at all about where your cursor ends up afterwards.

As for the highlightText issue, it's hard to say why it is broken. Your fiddle does not show it being used anywhere, and I would need to see its usage to further diagnose it. However, I have an idea about what might be going wrong:

I think you should take a close look at getCaretPosition. You are treating this as though it returns the cursor position, but that isn't what it does. Remember, to a browser, your cursor position is always a range. It always has a beginning and an end. Sometimes, when the range is collapsed, the beginning and the end are the same point. However, the idea that you could get a cursor position and treat it as a single point is a dangerous oversimplification.

getCaretPosition has another issue. For your editable div, it does this:

  1. Selects all of the text in a new range
  2. Resets the new range's end position to equal the cursor's end position (so all text up to the cursor's end position is selected).
  3. Calls toString() and returns the length of the resulting string.

As you have noted, some elements (such as <br />) affect the results of toString(). Some elements (such as <span></span>) do not. In order to get this calculation right, you'll need to nudge it for some element types and not for others. This is going to be messy and complicated. If you want a number that you can feed into highlightText and have it work as expected, your current getCaretPosition is unlikely to be helpful.

Instead, I think you should try working directly with the cursor's start and end points as two separate locations, and update highlightText accordingly. Discard the current getCaretPosition and use the browser's native concepts of range.startContainer, range.startOffset, range.endContainer, and range.endOffset directly.

Improve this answer

6 Comments

This is a highly insightful answer! Thank you for guiding me! I really wonder that the best solution to all this heavy methods was just range.startContainer o.O I guess I need to do a lot of reading in this matter. Thanks again!!!
But could you explain the need for if (range.startContainer.nodeType === Node.TEXT_NODE) {? And what is .insertData ? Sorry but I couldn't find documentation for them. Thanks :)
Also, how do I position the caret anywhere in a content-editable div ?(just anywhere, unrelated to this brace completion feature) I again searched past two pages in Google yet no result.
Actually <br> elements don't contribute to the string returned by the toString() method of a range: only text from text nodes is included. The same is not true (in some browsers) of Selection.toString(), however. The original answer from which getCaretPosition() is taken lists its limitations pretty clearly. I definitely agree with everything you say about careful DOM manipulation making this much easier than using innerHTML.
@GaurangTandon: The relevant APIs (DOM Range and Selection) for doing what you want have been mentioned: any answer you get will be based on them. insertData is a method of DOM text nodes. By the way, I got the last link as the first result of googling "mdn insertdata".
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.