Question

这可以用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>

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

Answer 2

很抱歉我之前的热门回复，这是一个正确的版本，它使用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>

用户开始输入时显示元素

修改

2 个答案: