Select checkbox when clicking in textarea (JavaScript?)
I know my PHP but I got only very basic JavaScript knowledge, probably because I try to avoid to use JavaScript at all because there is always the risk of visitors having disabled JavaScript's in their browsers... However now I need a certain task in a html form that might only be solved by using JavaScript.
I have one textarea and one checkbox. The checkbox is checked by default when the page is loaded. I want the checkbox to become unchecked automatically if the user clicks inside the textarea. I want the checkbox to become checked again if the user clicks anywhere outside the textarea and for some reason didn't write anything in the textarea.
I have tried to search for guides and tutorials that cover this but have not been able to find a solution (probably because of my lacking JavaScript skills I might not be using the right search terms).
Anyone have any suggestions for me, I'd be greatful!
<!DOCTYPE html>
<html>
<body>
<textarea id="iamtextarea" rows="4" cols="10" onfocus="onFocusTextArea();" onblur="onBlurTextArea();"></textarea>
<input type="checkbox" name="iamcheckbox" id="iamcheckbox" checked="checked"> I am checkbox<br>
</body>
</html>
<script type="text/javascript">
function onFocusTextArea(){
document.getElementById("iamcheckbox").checked = false;
}
function onBlurTextArea(){
if(document.getElementById("iamtextarea").value==""){
document.getElementById("iamcheckbox").checked = true;
}
}
</script>
Run the above code it will do the desired job!
Iinjoy!
Now you have to add one hidden field and some changes in onBlurTextArea function, see below code:
<html>
<body>
<textarea id="iamtextarea" rows="4" cols="10" onfocus="onFocusTextArea();" onblur="onBlurTextArea();">Enter some text in textbox</textarea>
<input type="checkbox" name="iamcheckbox" id="iamcheckbox" checked="checked"> I am checkbox<br>
<input type="hidden" name="hiddenString" id="hiddenString" value="Enter some text in textbox">
</body>
</html>
<script type="text/javascript">
function onFocusTextArea(){
document.getElementById("iamcheckbox").checked = false;
}
function onBlurTextArea(){
if(document.getElementById("iamtextarea").value==document.getElementById("hiddenString").value){
document.getElementById("iamcheckbox").checked = true;
}
}
</script>
Considering your markup to be
<textarea id="txtAr"></textarea>
<input type="checkbox" id="chkBx">
Then the js,
(function() {
var oTxt = document.getElementById( 'txtAr' ),
oChk = document.getElementById( 'ChkBx' );
oTxt.addEventListener( 'click', function() {
oChk.removeAttribute( 'checked' );
}, false );
}());
Should do the job.
Torbjörn.
First at all I suggest you to forget the affraid about to use Javascript. Think a little. If an user disabled the js in him browser, he will not use any website.. so if he wants to use yours or any other, he will enable it.
Let's to the question..
I will say the most simple way to do this..
<body onclick="if(document.getElementById('area').value == '') document.getElementById('chk').checked = false;">
<form>
<textarea id="area" onclick="document.getElementById('chk').checked = true"></textarea>
<input type="checkbox" id="chk">
<form>
</body>
I didn't test this solution, but I think it should works. You can do something better than this using .trim() , for example, and other things..
But this can help you for now.
Hope it helps.
链接地址: http://www.djcxy.com/p/19388.html