单击textarea时选择复选框（JavaScript？）

Select checkbox when clicking in textarea (JavaScript?)

我知道我的PHP，但我只掌握了非常基本的javascript知识，可能是因为我尽量避免使用javascript，因为访问者总是有在浏览器中禁用javascript的风险……不过，现在我需要一个HTML表单中的特定任务，该任务只能通过使用JavaScript来解决。

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

我曾尝试搜索涵盖此内容的指南和教程，但未能找到解决方案(可能是因为我缺乏JavaScript技能，所以可能无法使用正确的搜索词)。

有人对我有什么建议，我会很高兴的！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!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
</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;
}
}

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

我很高兴！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

相关讨论

Torbj？氡

首先，我建议您忘记使用javascript所带来的麻烦。想一想。如果用户禁用了浏览器中的JS，他将不会使用任何网站。所以如果他想用你的或者其他的，他会启用它。

让我们来讨论这个问题……

我想说一个最简单的方法……

1
2
3
4
5
6

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

但现在这对你有帮助。

希望它有帮助。

考虑您的标记为

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

然后JS，

1
2
3
4
5
6
7
8

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

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

应该做这个工作。