I don't know what will be the correct title for this question. I have inputbox with 'static placeholder', example for url jsfiddle.net/manyahin/MxRqX
<div class="controls">
<input type="text" />
<span>http://</span>
</div>
User can't delete http:// and type text after this. Span have margin-left: minus for position above input, and input have text-ident for get free space for span.
When I click at input, cursor set in start of input, before http. And when I start typing, cursor go to normal position. How to fix this bug or please give me an alternative method to make this happen. Sorry for my bad english.
If the input text always needs to start with http:// the easier way would be to put it as a label before the field rather than in it and then prepend the http:// on the backend. or you could catch it on the back end and read the text from the input field and prepend http:// to the input text if the user didn't enter this.
another way would be through jquery where you can set the value of the text box to be http:// with whatever text the user inputs.
A third less elegant way is to use two input fields and use css to position and style them to appear as one. set the first field value to http:// (assuming it is always going to be http://) and set it to readonly.
How about using :before in css?
Give this a go....
http://jsfiddle.net/MxRqX/3/
Related
When the user types the input value I want to show the input field text like the below style:
this style I want to apply in input text
I didn't get any idea how to do this.
With text-decoration, for example:
input {
text-decoration: line-through;
}
<input type="text">
The terminology you want for searching is probably "strike through", as terms like "cross" and "delete" are unlikely to find what you're looking for in this case. (Though you did just introduce me to the <del> HTML element. Which I've never needed and probably never will, but it's good to know what it is in case I encounter it.)
Im not sure on how to explain this but, what I want to know is there if there is any way to "lock" just one part of an text area in a html form. Example:
<input name="example" type="text" id="example" valeu="__this part cant be modified__, and here user insert aditional info" />
And then I get this field value as like: "this part cant be modified + what user typed"
Thank you
I don't think you can, your best bet would probably to just append your default value to their input upon submission.
No, there isn’t, not for input elements, not for textarea elements.
You can however create an impression of such behavior, e.g. having some text and an input element on the same line and setting their style as similar as possible (setting all text, background, and border properties). Of course, the form data would still consist of the input value. And prepending the fixed text to it in client-side JavaScript would be possible but normally pointless, since it would be inherently unreliable and since you can simply make the form handler behave as if it got that string (i.e., make it have it as built-in data).
which property is used for write all text for capitalize in textfield.
And how?
please reply
you can use css property "text-transform":
.myClassName {text-transform:capitalize;}
link for details
There's no attribute that says "this field can only contain capital letters". What you might be able to do is add text-transform: uppercase to the CSS for the text box, but the actual value of the box will still contain mixed case.
If that's not good enough, you could add an onchange event handler that says something like this.value = this.value.toUpperCase();. That'd alter the value passed back to the server, or the value your scripts see (as opposed to the CSS, which only alters the value the user sees).
My application has a form with 2 submit buttons:
<input name="rating" class="Show" type="submit" value="Show answer">
<input name="rating" class="Skip" type="submit" value="Skip">
However I noticed some errors in GAE logs:
ValueError: invalid literal for int() with base 10: 'Voir la r\xe9ponse'
ValueError: invalid literal for int() with base 10: 'Sauter'
Basically it's the value of the form buttons, in French, whereas my app is in English.
How can a user change the form submit values? For example with google translate etc?
How can I handle this?
Yeah, that'll be Google Translate. It translates the text on the buttons as well. If you really want to prevent this, you'll have to make sure Google can't translate the text on the button. Note: these answers are not semantic HTML. Not sure if there's a cleaner method, I hope so, but this is what first springs to mind:
Method 1: hidden inputs
Since you're using buttons anyway, you might as well have them submit something. Put each button in its own form, add a hidden field, and use the value of the hidden field to determine what page to load next.
Downside: a lot of extra html, not really maintenance-friendly
Method 2: numeric value
Change the value of the buttons into something numeric, like 0 and 1. Hide the button's value with CSS and give the button a background image that shows the text. Load the page based on the numeric value.
Downside: very bad accessibility (screen readers, etc.), text on button won't be translated.
I really do hope there's better alternatives I haven't thought of yet.
Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea /> as I want to avoid users entering hard line-breaks by pressing enter.
No, sorry. <input type=text> is single line by definition. See the W3C document Forms in HTML Documents:
text
Creates a single-line text input control.
Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.
See its documentation.
You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea> field.
Look at this,
http://www.echoecho.com/htmlforms08.htm
The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.
Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:
$text = str_replace(array("\n","\r"),'',$_POST['text_field']);
This would have the desired effect of blocking newline characters. As others have pointed out it's not really possible to get multi-line input in an input field.