单击文本区域时选择复选框（JavaScript？）答案

【问题标题】：Select checkbox when clicking in textarea (JavaScript?)单击文本区域时选择复选框（JavaScript？）
【发布时间】：2014-02-09 20:19:33
【问题描述】：

我知道我的 PHP，但我只有非常基本的 JavaScript 知识，可能是因为我尽量避免使用 JavaScript，因为总是存在访问者在他们的浏览器中禁用 JavaScript 的风险......但是现在我需要一定的html 形式的任务，可能只能通过使用 JavaScript 来解决。

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

我已尝试搜索涵盖此内容的指南和教程，但未能找到解决方案（可能是因为我缺乏 JavaScript 技能，我可能没有使用正确的搜索词）。

任何人对我有任何建议，我会很感激！

【问题讨论】：

标签： javascript checkbox textarea

【解决方案1】：

<!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>

运行上面的代码，它将完成所需的工作！

尽情享受吧！

现在你必须在 onBlurTextArea 函数中添加一个隐藏字段和一些更改，见下面的代码：

<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>

【讨论】：

是否可以添加对此的支持：IF "iamtextarea" IS empty string OR default string to above code？span>
默认字符串来自数据库条目，并作为 php 变量回显：=$iamdefaultstring?>。默认字符串可以以另一种形式编辑，这样一组用户可以编辑默认文本应该是什么，另一组用户可以选择使用默认文本或用他们自己的文本覆盖它。
@TorbjörnLokeNornwen 请检查答案

【解决方案2】：

托比昂。

首先，我建议您忘记使用 Javascript 的恐惧。想一想。如果用户在他的浏览器中禁用了 js，他将不会使用任何网站.. 所以如果他想使用您的或其他的，他将启用它。

让我们来回答问题..

我会说最简单的方法..

<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>

我没有测试这个解决方案，但我认为它应该可以工作。例如，您可以使用.trim() 和其他东西来做比这更好的事情..

但这暂时可以帮到你。

希望对你有帮助。

【讨论】：

【解决方案3】：

考虑到你的标记是

<textarea id="txtAr"></textarea>
<input type="checkbox" id="chkBx">

然后是js，

(function() {
    var oTxt = document.getElementById( 'txtAr' ),
        oChk = document.getElementById( 'ChkBx' );

    oTxt.addEventListener( 'click', function() {
        oChk.removeAttribute( 'checked' );
    }, false );
}());

应该做的工作。

【讨论】：