I am using the code below to try and get the value to show before clicking. I want the value "reply here" to show in the texarea and when someone clicks it should go away letting them type their reponse. I am using the code below but it doesn't show the value until one click in the box. How can i tweak it?
onclick="this.value='';" onfocus="this.select()"
onblur="this.value=!this.value?'Reply
here':this.value;" value="Reply here"
textarea's dont take the "value" attribute, to set a default value of a textarea use the following:
<textarea>reply here</textarea>
I'm searching for a different answer, but thought I could shine some light on what's available with HTML5. All you need to do is do the following:
<textarea placeholder="Reply here"></textarea>
However, I'm sure it doesn't work with much older browsers, but here's a link to get backward compatibility: how to use HTML5 placeholder attribute with backward-compatibility in mind?
Related
I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.
I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.
Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.
I'm using this script: https://github.com/domchristie/ios-placeholder to get cross-browser iOS-style placeholder text on a form.
I'm experiencing a problem when I try to pre-populate the field through javascript with a variable from the URL, though. Because no physical keys are being pressed in the field to activate the removal of the placeholder text, both the pre-populated text and the placeholder text are present:
http://mattbyrd.com/test/test.html?Name_First=Matt
Does anyone know any good workaround for that? Or an alternate way to accomplish the placeholder text across browsers?
Thanks! Any help is greatly appreciated.
Matt
You can use placeholder attribut which works well with iOS, and add this small fix to make it work with every browser :
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
<input type="text" placeholder="my text" ... />
I have always sucked at javascript I have read multiple books and studied online but on some things I just cannot get them to work. Anyway, I use a simple javascript function that selects all of the text in a textfield when I hover it:
<input type="text" onMouseOver="this.focus();this.select()">
how do I undo that action once the cursor is no longer over that field? This is important since I bought a new BlackBerry Bold 9930 and hate the internet browsing, but with javascript I am making things easier like highlighting all text in a field by just hovering over it. So I just need the code that unselects all of the text once I move away from that field since in the Blackberry browser it wants to stay stuck in that field highlighting the text unless I click somewhere else. Thanks.
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.selectionStart = this.value.length; this.blur();">
http://jsfiddle.net/meQek/
it's kind of an odd way but logical when you think about it. If you highlight it all on mouseenter, the selectionEnd is at the end... so just make the selectionStart at the same position on mouseleave.
EDIT:
actually... blur works just fine :P
http://jsfiddle.net/meQek/1
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.blur();">
Try this:
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.blur();">
Not sure how the Blackberry browser will handle it, but in most browsers it should unfocus the text field when your mouse leaves it.
this is going to be a total newbie question but I can't really do a google search cos I'm not sure what it's called.
You know that the quick search bar on the top right hand corner in StackOverFlow?
You know how it's got "search" written there, and when you click on it, it goes blank, what's the best way to implement this?
I see the javascript has this in stackoverflow.
onfocus="if (this.value=='search') this.value = ''" value="search"
But if I have a seperate search button, and the user doesn't focus on that search criteria (it's got multiple search criterias), I would need to take the "search" into account.
I would need to do something like
if(textbox1.Text == "search")
{
textbox1.Text = "";
}
That just seems a bit annoying having to put the text ("search") in 3 places. Twice in the markup and once in the code behind.
Is there another way of doing this?
The term you're looking for is "placeholder". Other than doing it manually, there's the HTML5 placeholder attribute which is being supported by more browsers as time goes by.
Looks like the SO search does what you did where the onFocus clears the text if the text is search. You can prove this by typing search into that box, click somewhere, then click back in the text box and it is removed. Do the same thing using "test" and it is not removed.
If you do end up implementing it manually make sure you use a constant instead of using "search" in multiple places. Using a constant is less error prone because you won't mis-type and if you change what you want it to say you will only have to change it in one place.
Yes, there are other ways to do it, but all of them will require typing more than just "search" 3 times.
For example, you could put a constant string in your class like this:
const string SearchText = "search";
Then, in your class you would say something like this:
if(textbox1.Text == SearchText)
{
textbox1.Text = "";
}
And in your aspx page you would say:
onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"
Now, doesn't it seem a lot simpler to just write the word "Search" 3 times?
If you have a button written "search" on it, you don't need the text on the input field, because it's obviously a search input. Here in sof there's no search button or label, so if there's no text on the input, you don't know what it's for.
In your case, there's 3 boxes for 3 search criterias. So instead of putting "search" on all of then, you should put the search criteria description. This is just to save the space a label would take. If you use labels, you don't need the text inside the input.
Finally, if on the back end you receive the input value as the description text, just ignore it.
Well the real answer is to use a javascript framework like jQuery where binding this stuff becomes much less repetitive than inline event stuff.
Otherwise, what you do is you add an onsubmit handler in the form which indeed does what you describe.
Alternatively, if localization is not an issue, you don't use "real text". You use a background image that looks like text. Then you can have css
<style>
.watermark {
background-image: url(xxxxx.png)
}
.nowatermark {
}
</style>
(I'm guessing at the syntax)
Then you can have
<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">
Not sure if it's overkill, but I ended up using the telerik rad textbox instead.
<telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
</telerik:RadTextBox>
And it worked okay.
it's called a placeholder or watermark
in HTML5 it's really easy, you just have to write placeholder="your placeholder"
http://diveintohtml5.info/forms.html
otherwise in JavaScript you can do something like this:
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/
In this blog,
http://www.bswebdev.com/2008/12/javascript-change-input-box-type-to-password/
I have found the following snippets for fixing change input type through javascript in IE6.
<script type="text/javascript"><!--mce:0--></script>
# put the script in the head of your html
<input id="pw" name="password" type="text" value="Password" />
What is <script type="text/javascript"><!--mce:0--></script>?
Short answer: Junk
Longer answer:
In XHTML: It is an empty script element.
In HTML: It is a 0 evaluated in null context (so it is discarded without doing anything) and with a label (with no block!) 'mce'. This is combined with a broken (because it is all on one line) "hide from Netscape 2 comment".
I suspect the author made a few mistakes when trying to write up their idea using their blog software.
The whole thing it is trying to achieve is a dirty hack anyway. It is trying to work around a side effect of abusing the value attribute as a label. If you really want to have your labels vanish when you enter text into the fields, then use real <label> elements and hide them. e.g. http://dorward.me.uk/tmp/label-work/example.html
I had a similar problem before, there is another way of looking at this problem, what exactly are you trying to accomplish, are you trying something like this :
Input will have value "password" at the beginning
When you focus and start typing it should mask the characters
When you focus out the "password" value will return
Is this what you seek, or? Be more specific please.