0

这可以用javascript吗？现在，我使用它，它在 TextArea 获得焦点时显示元素。但是我可以让它显示只有当它被聚焦并且已经在 TextArea 中输入了一些东西时？

<form action="#" method="post">
  <textarea onfocus="document.getElementById('submit').style.display = 'block';" id="text" style="width: 540px; height: 50px; overflow:hidden;"></textarea>
  <input id="submit" type="submit" value="Submit" style="display:hidden">
</form>

编辑

尝试了 SpenserJ 的代码，但它不起作用。提交按钮不会出现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#text {
 width: 540px;
height: 50px;
overflow: hidden;
}

#submit {
display: none;
}
</style>
<script>
var textInput = document.getElementById('text')
, submitButton = document.getElementById('submit');
function checkTextValue() {
if (textInput.value !== '') {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
}
</script>
</head>
<body>

<form action="#" method="post">
<textarea onkeypress="checkTextValue()" onkeyup="checkTextValue()" onchange="checkTextValue()" id="text"></textarea>
<input id="submit" type="submit" value="Submit">
</form>

</body>
</html>
4

2 回答 2

1

使用onkeypress、onkeyup、onchange检测值的变化，然后根据是否为空来设置显示。

http://codepen.io/SpenserJ/pen/xKmcs

HTML：

<form action="#" method="post">
  <textarea onkeypress="checkTextValue()" onkeyup="checkTextValue()" onchange="checkTextValue()" id="text"></textarea>
  <input id="submit" type="submit" value="Submit">
</form>

JS：

var textInput = document.getElementById('text')
  , submitButton = document.getElementById('submit');
function checkTextValue() {
  if (textInput.value !== '') {
    submitButton.style.display = 'block';
  } else {
    submitButton.style.display = 'none';
  }
}

CSS：

#text {
  width: 540px;
  height: 50px;
  overflow: hidden;
}

#submit {
  display: none;
}
于 2013-06-21T22:31:38.850 回答
-1

对不起我之前的匆忙回复，这是它的正确版本，它使用onblure而不是onfocus，你也可以使用keyup,keydown,keypress..

function checkFortextAreaValue(textArea){
    if(textArea.value.length > 0){
        document.getElementById('submit').style.display = 'block';
    }else{
        alert('textArea is empty');
    }
}

<form action="#" method="post">
    <textarea id="text" style="width: 540px; height: 50px; overflow:hidden;" onblur="checkFortextAreaValue(this); "></textarea>
    <input id="submit" type="submit" value="Submit" style="display:hidden" />
</form>
于 2013-06-21T22:19:10.523 回答