单击文本区域时选择复选框(JavaScript?) [英] Select checkbox when clicking in textarea (JavaScript?)

查看:85
本文介绍了单击文本区域时选择复选框(JavaScript?)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我了解我的PHP,但是我只掌握了非常基本的JavaScript知识,这可能是因为我试图完全避免使用JavaScript,因为访问者总是有在浏览器中禁用JavaScript的风险。但是,现在我需要html格式的任务,只能使用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.

我有一个textarea和一个复选框。加载页面时,默认情况下选中此复选框。
我希望如果用户在文本区域内单击,则复选框会自动取消选中。
我希望如果用户单击文本区域之外的任何位置并且由于某种原因未在文本区域中写入任何内容,则再次选中该复选框。

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.

试图搜索涵盖此内容但未能找到解决方案的指南和教程(可能是由于我缺乏JavaScript技能,所以我可能未使用正确的搜索词)。

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!

现在,您必须添加一个隐藏字段和onBlurTextArea函数的一些更改,请参见以下代码:

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>

这篇关于单击文本区域时选择复选框(JavaScript?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆