How to disable on PART of a textbox?

I have a textbox where I want the first 10 characters of it to ALWAYS be "../videos/" (without quotes).

I don't want them to be able to delete it in any way, shape, or form. I have seen this done before in another webpage where the developer prevented the user from being able to highlight, delete, or backspace the first 10 characters or so of the textbox...

Any ideas on how to do this?

I am using ASP.NET, but unless there is a server-side control, I would imagine that this would take some sort of javascript in order to make this possible.
LVL 1
JaressLooAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

j_stoneCommented:
it seems like that might create security problems...

any reason you can't just add the "../videos" part after they enter the rest?
0
HonorGodSoftware EngineerCommented:
The only way would be to have an even handler that gets called when keys are either pressed, or released, and check for thing like delete, or backspace.

It would be better though to just not display this prefix stuff, but automatically prepend it to the value specified by the user in the input field.
0
JaressLooAuthor Commented:
I ended up just writing a javascript function to take care of this.

I attached the javascript function that I wrote where "e" is the clientID of the control to be evaluated.

I attached this client side function by using the <ControlName>.Attributes.Add() method in ASP.NET, as follows:

txtVideoUrl.Attributes.Add("onkeyup", "checkvalue(" & txtVideoUrl.ClientID & ")")

This took care of my problem pretty well. It still allows them to delete it, but the moment it's deleted, the javascript function adds it right back.

I would show you how this works, but it's a protected page, so I can't...

I mainly wanted to do this for effect. There was no particular reason to do it this way. I could have just as well prepended it to the value of the string once the page posted back, but I wanted to do something cool.

Thanks for your help!!
function checkvalue(e) {
  var ele = document.getElementById(e);
  if (ele.value.substring(0, 10) != '../videos/') {
    if (ele.value.length < 10) {
      ele.value = '../videos/';
    }
    else { ele.value = '../videos/' + ele.value; }
  }
}

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Obadiah ChristopherCommented:
What you could do is. Create an image which contains only the words videos. Provide the background of the textbox as the image and using css provide left padding for the textbox.

This is an alternative solution.

Hope this helps.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GwynforWebCommented:
Your "solution" does not work, I can type into the 1st 10 positions and I can paste in anything
0
JaressLooAuthor Commented:
This was FAR better than my solution!
0
JaressLooAuthor Commented:
I have accepted informaniac's solution as the real solution. While my method does work (at least for Firefox, IE, and Safari on Windows), this solution is a MUCH better idea!
0
GwynforWebCommented:
this is closer

<script>
function vid(obj){
 if (!/^\.\.\/videos\//.test(obj.value))
   obj.value=obj.value.replace(/^(.{11})/,"../videos/")
}
</script>

<form>
 <input value="../videos/"  onkeyup="vid(this)" onpaste="return false">
</form>
0
GwynforWebCommented:
your "solution" does not work, I tested it

0
JaressLooAuthor Commented:
This really does seem to work for me. Maybe you can expand on how this doesn't work.

I have created a page where you can test it the way I'm using it. Visit this link to check it out:

http://betatest1.jaressloo.com/textboxtest/
0
GwynforWebCommented:
Tested on  Firefox/3.0.11 and IE6

(1) Type an x before ../videos/ and you get

../videos/x../videos/


(2) I can over write ../videos/ by simply select all and pasting. Basically can paste anything I like.
0
GwynforWebCommented:
....just found a small problem with mine and new version shld be

function vid(obj){
  if (!/^\.\.\/videos\//.test(obj.value))
         obj.value=obj.value.replace(/^.{0,11}/,"../videos/")
}


Covering all sub cases for these types of problems is notoriously difficult, regardless of what method you use.
0
JaressLooAuthor Commented:
Changed the link to:

http://betatest1.jaressloo.com/ee/textboxtest/

Your js function works a lot better now! Before, if I just backspaced the 10th character, it didn't do anything.

Anyway, it works better now, but I enabled the paste feature again because I want them to be able to paste. Some of the video names might be pretty lengthy and it would be a pain to not allow that...

Thanks for your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.