2

I have a textarea that starts with text I don't want the user to be able to change and are prevented in doing so by the following:

  • The left key and backspace work until it reaches the position of the undeletable text.
  • The up key has a special function and doesn't serve navigational purposes (returns false).
    • (With the previous two rules, the user cannot place the caret in this region via arrow keys)
  • When the user clicks the element, the caret is placed at the end of the textarea (on mouse down).
  • Home and ctrl+a have been handled too.

For illustration's sake, it would look something like

Don't Delete Anything Before the Colon:  Your text here.  The user text will also
wrap like this.

As far as I know, I have every situation covered but one: Drag and drop. I know how to disable drag and drop entirely, but that isn't what I want. I just don't want the 'undeletable text' to be able to be altered. Can I position the caret before allowing the drop to take place. Alternatively, can I block the drop but access the drop event and place it where I'd like?

2
  • Why does the text have to be in the textarea? Just put it outside beside the textarea in a span and make your life simpler. Referring to your question, I'm not sure, but I don't think you can set caret position ondragover
    – Some Guy
    Nov 5, 2011 at 5:16
  • I was originally going to try something like that but want the text to be able to wrap under the 'undeletable text'. I started off using a text input field and adding one for each new line but it was getting ugly.
    – Gary
    Nov 5, 2011 at 13:06

2 Answers 2

3

I worked out a solution. It depends on jQuery, but a skilled JS programmer could easily remove that dependency I'm sure.

Live Demo: http://trafnar.github.com/permastring/

JS Code: https://github.com/trafnar/permastring/blob/master/permastring.js

Github Repo: https://github.com/trafnar/permastring

It works by constantly storing the value of the text field then basically 'undoing' any change that alters the permanent string.

The biggest drawback I've noticed so far is that it ruins the users ability to do select all + delete. Edit: I've fixed this drawback, it's now possible to select all and delete.

2
  • So the idea is to let the drop happen, but check if the permanent string has been modified and change it back if so? That's not a bad plan, but let me throw one more stipulation (I know, they're piling up). I want this to be seamless to the user, rather than dropping where it shouldn't, then shifting into place.
    – Gary
    Nov 5, 2011 at 13:18
  • It was pretty good, the only problem is I still want the data; just not in the middle of my permanent string. I appreciate your effort.
    – Gary
    Nov 5, 2011 at 19:05
1

I figured it out, here's the gist:

To avoid confusion, I first "hid" the caret OnDragOver and OnDragEnter.

function(event){
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

Then I blocked OnDrop, but placed the data where I wanted.

function(event){
  element.value += event.dataTransfer.getData("Text");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.