?
Solved

How to disable on PART of a textbox?

Posted on 2009-07-04
13
Medium Priority
?
340 Views
Last Modified: 2012-06-21
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.
0
Comment
Question by:JaressLoo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 5

Expert Comment

by:j_stone
ID: 24778620
it seems like that might create security problems...

any reason you can't just add the "../videos" part after they enter the rest?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24778705
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
 
LVL 1

Author Comment

by:JaressLoo
ID: 24779008
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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 20

Accepted Solution

by:
informaniac earned 500 total points
ID: 24779692
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24781799
Your "solution" does not work, I can type into the 1st 10 positions and I can paste in anything
0
 
LVL 1

Author Closing Comment

by:JaressLoo
ID: 31599853
This was FAR better than my solution!
0
 
LVL 1

Author Comment

by:JaressLoo
ID: 24781807
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24781840
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24781843
your "solution" does not work, I tested it

0
 
LVL 1

Author Comment

by:JaressLoo
ID: 24782158
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24782865
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24782928
....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
 
LVL 1

Author Comment

by:JaressLoo
ID: 24783325
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question