用戶開始輸入時顯示元素

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響應是正確的版本，它使用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 個解決方案

解決方案1
1 2013-06-21 22:31:38

解決方案2
-1 2013-06-21 22:19:10

用戶開始輸入時顯示元素

問題描述

編輯

2 個解決方案

解決方案1 1 2013-06-21 22:31:38

解決方案2 -1 2013-06-21 22:19:10

解決方案1
1 2013-06-21 22:31:38

解決方案2
-1 2013-06-21 22:19:10