js remove only default message onclick, not text a user inputs
Afternoon all,
In need of some technical advice from the masters... I know the function to remove the default message on click from a form, but the problem that's occuring is that after a user has initially clicked in the message area (to remove the default), if they then click in the message area again, it removes what they've written!! I guess an example would be if they noticed a spelli开发者_如何学运维ng mistake or need to change part of their message.
There must be a way to solve this?
The code for the text area is:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="this.value=''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
What you probably want is this, right?
- When the page first loads and there's no user-supplied value, the "Please use" message is shown.
- When the textarea gets focus, the "Please use" message should go away. (Perhaps you want to wait until something is typed; whatever.)
- When the textarea loses focus, if the user has left behind an empty
<textarea>then the "Please use" message should come back. - When the form is submitted, something has to check to see if the
<textarea>is still empty (showing the "Please use" message) and if so disable it or clear the value.
What I'd do is have the "focus" and "blur" handlers maintain a state indicator to explicitly track the state of the element, instead of relying on doing a text comparison to your "Please use" message. Exactly how you do that would depend on the way you're writing event handlers in general, but it might look like this:
function setupTextareaHandlers() {
var txta = document.getElementById("yourTextArea");
var empty = !txta.value;
txta.onfocus = function() {
if (empty) txta.value = '';
};
txta.onblur = function() {
if (!txta.value) {
empty = true;
txta.value = 'Please use ... ';
}
};
}
You would probably also set up your submit handler in there too.
After the initial onclick you will need to remove the onclick attribute from the textarea using something like this:
document.getElementById('message').onclick = null;
You could change the onclick to call a function that does the this.value = '' and then removes the onclick.
Edit:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="removeDefaultText(this)">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
<script type="text/javascript">
function removeDefaultText(el){
el.value='';
el.onclick=null;
}
</script>
a simple working script
<textarea name="message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
Put anything for default value here
</textarea>
just lernaed a few minutes ago X)
Live example: http://jsfiddle.net/SRYLg/
Here is the jsfiddle
HTML:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9">default message</textarea>
JavaScript place within the <head> tag:
<script type="text/javascript">
var defaultMsg = document.getElementById("message").value;
function init() {
var mytextarea = document.getElementById('message');
mytextarea.onblur = function() {
if (this.value == '') this.value = defaultMsg;
}
mytextarea.onfocus = function() {
if (this.value == defaultMsg) this.value = '';
}
}
window.onload = init;
</script>
try this
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="javascript:if(this.value='default.value') this.value =''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
加载中,请稍侯......
精彩评论