when entering on the text area showing a submit button
Question
I want to when entering in textarea imediately show me the submit button I can use
<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" />
is there any solution with php or javascript?
Brettz SOLUTION:
<html>
<head></head>
<form>
<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" />
<textarea id="mytextarea"></textarea>
<script type="text/javascript">
function addEvent (el, type, listener) {
if (el.addEventListener) {
el.addEventListener(type, listener, false);
}
else if (el.attachEvent) {
el.attachEvent('on'+type, listener);
}
else {
el['on'+type] = listener;
}
}
addEvent(document.getElementById('mytextarea'), 'input', function () {
document.getElementById('submit').style.visibility = 'visible';
});
</script>
</form>
</html>
6 answers
solution1
3 ACCPTED 2011-06-04 06:12:18
<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" />
<textarea id="mytextarea"></textarea>
<script type="text/javascript">
function addEvent (el, type, listener) {
if (el.addEventListener) {
el.addEventListener(type, listener, false);
}
else if (el.attachEvent) {
el.attachEvent('on'+type, listener);
}
else {
el['on'+type] = listener;
}
}
// Change "focus" to "keypress", if you only want to show the button
// as soon as the user starts typing, rather than immediately
// after they click into the textbox. "input" might be more appealing
// but this will not work in older browsers. See
// http://help.dottoro.com/ljhxklln.php
addEvent(document.getElementById('mytextarea'), 'focus', function () {
document.getElementById('submit').style.visibility = 'visible';
});
</script>
Notice I've added a textarea with the id "mytextarea":
...which you can of course change to your own name or needs.
amolv's solution is convenient for quick-and-dirty building of a page. But inline JavaScript (and inline formatting or CSS) is generally frowned upon for real applications, as it is cleaner for the structure of your page (the HTML) to be separated from the behaviors (typically JavaScript, though HTML5 is adding a <command/> element which could let you separate the behaviors in a special part of your HTML).
Moving the scripts (and styles) to a separate page, also lets a browser cache (remember) the scripts without needing to reload it when the user visits another page at your site which might reuse the same code. Your server will therefore only need to deliver raw HTML (after the first download) without all the script text mixed inside, thereby speeding up delivery of your page content to the user.
solution2
3 2011-06-04 06:14:39
<textarea rows="" cols="" onfocus="document.getElementById('submit').style.visibility ='visible'" ></textarea>
<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" />
solution3
1 2011-06-04 06:11:02
You can use jQuery to do this quite easily.
$('#textToSubmit').focus(function(){
$('#submit').css('visibility','visible');
});
EDIT: To answer your comment below.
You will need to wrap this in a document ready function, so
$(document).ready(function() {
// put the rest of the code here.
})
This also needs to be placed in <script type="text/javascript"> tags in the <head> tags or just before the closing </body> tag.
Or you could put it inside a script file.
http://www.learningjquery.com/2006/09/introducing-document-ready
solution4
1 2011-06-04 06:11:44
UPDATE Here is the live working demo of your answer on JSFIDDLE
solution5
0 2011-06-04 06:17:04
I'm not entirely sure what you mean, but anyway to show the button again in your case you'd remove style="visibility: hidden"
You could use some thing like jquery to make your forms have some affect and make things look a little cool along with some css.
solution6
0 2011-06-04 07:59:23
You can use key press event for particular text box/ textarea and each time make sure text area has some text in it. On focus will not make sure text box has some text. Or you can use on blur with on focus to but it will not work that much great compare to keyppress
$('#yourtextarea').bind('keypress', function() {
var val = $(this).val();
if(val != "")
{
//show your submit button
//you can have extra check to make sure submit button is visible or not, if not visible than make it visible
}
else
{
//hide your submit button
}
});
you need jquery loaded. and given function should be in document.ready
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.