1

As discussed in this previous post

jQuery - Identify and mark link in textarea

I want to create an input box where URLs are automatically recognized, formatted and a method is called for every URL on whitespace after URL or on blur. We have a problem left though that the elem.html(newText); used for setting the formatting p-tags around the link detected works fine, except the cursor is set to the beginning afterwards. So when you writer "this is a www.url.com" and press space, the URL is recognized and formatted correctly and the method "linkDetected" is called, but the cursor moves to the beginning of the input field, with no possibility to write on.

I created a JSFiddle so you can see the code and problem for yourself:

http://jsfiddle.net/TgAGk/1/

Any help is appreciated.

Community
  • 1
  • 1
Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • I answered quite a similar question for contenteditable recently: http://stackoverflow.com/questions/14636218/jquery-convert-text-url-to-link-as-typing/14637351#14637351. Here's an example jsFiddle: http://jsfiddle.net/8hYSc/3/. It could be improved to not add a link to text that the caret is still in though. – Tim Down Feb 11 '13 at 17:19
  • Updated example where linkification is only triggered after pressing enter or space keys: http://jsfiddle.net/8hYSc/4/ – Tim Down Feb 11 '13 at 17:23
  • @TimDown this is pretty nice except that you have to enter http:// (www. alone will not work) and editing a link or deleting the space after the link and appending something (say you enter "http://www.youtube.com ", delete the space and append "/videos") does not work... – Raphael Jeger Feb 11 '13 at 17:45
  • Agreed, it definitely needs some tweaking. The regular expression is certainly not what I'd recommend: I used an extremely simple illustrative regex because the problem of writing a decent one is non-trivial and unrelated to the central problem. It's a starting point though, and the caret save/restore stuff should be useful. – Tim Down Feb 11 '13 at 18:10
  • please see my code I appended below - do you see why it isn't working? @TimDown – Raphael Jeger Feb 11 '13 at 21:47

2 Answers2

1

Ok I've added a setCaret-function I found here:

Set cursor position on contentEditable <div> (@Nico Burns answer)

http://jsfiddle.net/TgAGk/2/

var nouse = 'ignore this and thanks for the unnecessary code-check';

However, it doesn't work at all. Does anyone see my flaw?

Community
  • 1
  • 1
Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • The problem is the selection save/restore is reliant on the DOM not changing, whereas your code is replacing HTML and hence updating the DOM. This is why you need some way of representing the selection independent of the DOM, such as a character offset-based approach. – Tim Down Feb 12 '13 at 00:15
  • Thanks Tim - any ideas on how to get there? If we just remove the link-highlighting, everything else works fine, but that's not what I'd like to have... – Raphael Jeger Feb 12 '13 at 06:50
  • The example I linked to seems a reasonable starting point to me. – Tim Down Feb 12 '13 at 13:01
  • Tim, that's what my friend is working on right now :) Thank you VERY much! – Raphael Jeger Feb 12 '13 at 16:07
0

To play with ranges and selection easily, use rangy (rangyinputs).

oleq
  • 15,697
  • 1
  • 38
  • 65
  • we have considered rangy, but it's additional overhead and maybe there's some other solutions, as there's only that problem left with leaving the cursor where it is... – Raphael Jeger Feb 11 '13 at 15:43