Starting text field at specific point

[TechBoyJK]

I have a form field that includes some placeholder text.

company.com/choose

The placeholder text in all the other fields is adequate to explain what the field is asking for.

The problem in this instance is that I really only want the users to type in something for the 'choose' part.

So if they wanted company.com/anandtech, they'd enter 'anandtech'.

What I'm thinking is that once the user enters data, I need to have a js script that inserts 'company.com/' in front of it. I don't know how else I could keep that text in there in a read only state without using an image.







Here's the core html

<input type="text" class="form-control subFolder" name="subFolder" placeholder="company.com/choose" />

 

[Ken g6]

Make the text field have an invisible border, put a wrapper around it with a visible border, and put the text "company.com/" before the text field (as its <label> perhaps), inside the wrapper?

 

[purbeast0]

personally, i think inserting text after they leave is a terrible idea. that is just bad UX in my opinion.

why not just have a label next to a text box, where the label is company.com/ and the text box is just what they fill out in the input field? you could even use css to style it to basically make it look exactly like your image shows, but the "editable" area would just be there the "choose" text is.

EDIT:

also, showing us a pic of the whole form may help out to better understand what may or may not work.

 

[uclabachelor]

Do what you did with a text field and the placeholder text, but add an onclick event to replace the text field with a real one pre-populated:

<input style="display:block;" id="fauxField" type="text" placeholder="company.com/your-text">

<input style="display:none;" disabled="disabled" id="realField" type="text" placeholder="company.com/your-text" value="company.com/">

<script type="text/javascript">
$("#fauxField").on('click', function() {
    $(this).attr('display','none');
    $(this).attr('disabled','disabled');
});
</script>

The code above uses jquery so if you don't use that, you'd have to use the appropriate selector for the input fields and change the css attributes "display" and "disabled".

Or why not just do

<input type="text" placeholder="company.com/your-text" value="company.com/">

 

[purbeast0]

^^ with that solution, the user can get rid of the company.com/ part of the string. it sounds like that isn't what he wants them to be able to do.

and if you replace the field with a string every click event, what happens if they start clicking multiple times into it?

again, auto-populating things is just bad ux practice and you should really try to steer clear of it. if you have to do it with your design, then you should go back to the drawing board with your design.

 

[uclabachelor]

^^ with that solution, the user can get rid of the company.com/ part of the string. it sounds like that isn't what he wants them to be able to do.

and if you replace the field with a string every click event, what happens if they start clicking multiple times into it?

again, auto-populating things is just bad ux practice and you should really try to steer clear of it. if you have to do it with your design, then you should go back to the drawing board with your design.

Multiple clicking can be fixed by event handlers to restore/replace text... but that's just more complicated than it needs to be.

I personally would just add a static text saying "http://www.yourcompany.com/" and have an input field immediately to the right of it. Give it some style and then above/below the whole thing show the actual url dynamically as the user types.

 

[purbeast0]

Multiple clicking can be fixed by event handlers to restore/replace text... but that's just more complicated than it needs to be.

I personally would just add a static text saying "http://www.yourcompany.com/" and have an input field immediately to the right of it. Give it some style and then above/below the whole thing show the actual url dynamically as the user types.

yeah, that is my point, if you have to do all of this work around stuff like that, then you need to start questioning the design.

i agree with your suggestion though, that's definitely the route i'd go. it can be styled to look just like his image too.

 

[nickbits]

Don't do that. Put company/ outside of the text field and leave choose as the placeholder

 

[TechBoyJK]

Sigh.. I just think it'd look so nice if the company.com/ part was static and anything after that is what the actual field was capturing. But the reason I want it that way is because the format would match the rest of the form, which is using placeholders for the label.

It'd be nice if I could embed a div within the field that contained 'company.com/'

 

[purbeast0]

Sigh.. I just think it'd look so nice if the company.com/ part was static and anything after that is what the actual field was capturing. But the reason I want it that way is because the format would match the rest of the form, which is using placeholders for the label.

It'd be nice if I could embed a div within the field that contained 'company.com/'

as mentioned multiple times, you can do that, and it can look identical to your image, with them only being able to edit the "choose" part.

 

[TechBoyJK]

Do what you did with a text field and the placeholder text, but add an onclick event to replace the text field with a real one pre-populated:

<input style="display:block;" id="fauxField" type="text" placeholder="company.com/your-text">

<input style="display:none;" disabled="disabled" id="realField" type="text" placeholder="company.com/your-text" value="company.com/">

<script type="text/javascript">
$("#fauxField").on('click', function() {
    $(this).attr('display','none');
    $(this).attr('disabled','disabled');
});
</script>

The code above uses jquery so if you don't use that, you'd have to use the appropriate selector for the input fields and change the css attributes "display" and "disabled".

Or why not just do

<input type="text" placeholder="company.com/your-text" value="company.com/">

When I just do this

<input type="text" placeholder="company.com/your-text" value="company.com/">

It just renders 'company.com' as a populated value and doesn't show company.com/your-text

 

[Crusty]

Placeholders are for when you have no value.

 

[mrjminer]

Placeholders are for when you have no value.

This.

I would do one of the following:

1. Use a single input and a background image. Then, set a margin for the text so it shows up after the image. Probably would have to do some margins based on the media screen size.

2. Use two inputs. The first input would have the right border set to zero, have a value only (ie: whatever.com/), no name attribute, and be set to disabled. The second input would have the left border set to zero, have a name, and be enabled. Then, deal with positioning them right next to each other, of course.


If I'm understanding you correctly, at least.

 

[MrPickins]

Something like Bootstrap's input-group-addon would be your best bet.

http://getbootstrap.com/components/#input-groups