上的文字输入区域显示一个提交按钮

问题描述:

我想在textarea的当进入到时imediately告诉我提交按钮,我可以使用上的文字输入区域显示一个提交按钮

<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" /> 

有没有用php或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> 
+0

所以你想隐藏提交按钮时,文本框/区域没有焦点或其中的文字?只是试图了解你所要求的。谢谢 – 2011-06-04 06:10:43

+0

当它没有文本没有显示输入文本后显示的子按钮 – Nickool 2011-06-04 06:20:09

+0

请注意,所有这里调用'$(...)'的解决方案都依赖于正在加载的jQuery。 JSFiddle并没有透露这是如何发生在HTML中,但如果你想加载jQuery,你特别需要将jQuery加载到''标签中。 – 2011-06-04 07:31:26

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

通知你的答案的带电作业演示中,我已经添加id为 “mytextarea” 一个textarea:

......你当然可以改变你自己的名字或需要。

amolv的解决方案便于快速建立页面。但内联JavaScript(以及内嵌格式或CSS)通常在真实应用程序中被忽略,因为它对于页面结构(HTML)更清晰,以便与行为分离(通常是JavaScript,尽管HTML5增加了<command/>元素可以让你将你的HTML中特殊部分的行为分开)。

将脚本(和样式)移动到单独的页面中时,也可以让浏览器缓存(记住)脚本,而无需在用户访问可能会重复使用相同代码的另一个页面时重新加载脚本。因此,您的服务器只需在第一次下载之后提供原始HTML,而不需要在其中混合所有脚本文本,从而加快了将页面内容传递给用户的速度。

+0

对于使用核心JavaScript的时候,OP没有提到jQuery。 – squidbe 2011-06-04 06:21:26

+0

我无法理解这段代码,请你解释一下吧? – Nickool 2011-06-04 06:31:40

+0

由于旧版浏览器(大多数特定的Internet Explorer 2011-06-04 07:15:00

您可以使用jQuery来做到这一点很容易。

$('#textToSubmit').focus(function(){ 
    $('#submit').css('visibility','visible');  
}); 

http://jsfiddle.net/CCuVY/1/

编辑:下面来回答您的评论。

您需要在文档准备功能包裹这一点,所以

$(document).ready(function() { 
    // put the rest of the code here. 
}) 

这也需要被放置在<script type="text/javascript">标签在<head>标签或刚刚闭幕</body>标记之前。

或者你可以把它放在脚本文件中。

http://www.learningjquery.com/2006/09/introducing-document-ready

+0

杰森我用它,但在这里我没有结果我已经下载了我的文件夹中的jquery,也名为:jquery-1.4.2.min.js,但它不起作用 – Nickool 2011-06-04 06:21:19

+0

不重新隐藏空文本字段 – 2011-06-04 06:24:09

+0

@Negin。看到我上面的编辑。 @Layoric真实。但OP没有要求重新隐藏。 – 2011-06-04 06:28:20

UPDATE这里是JSFIDDLE

+0

如果文本框为空,您不想重新隐藏空的文本框 – 2011-06-04 06:23:15

+0

? – 2011-06-04 06:24:46

+0

@ Coding-Freak,我相信这是OP所要求的。 “当它没有文字没有显示子按钮” – 2011-06-04 06:26:07

<textarea rows="" cols="" onfocus="document.getElementById('submit').style.visibility ='visible'" ></textarea> 

<input type="submit" id="submit" name='sub' value="Transfer" style="visibility: hidden" /> 
+0

befor输入一个文本,只需点击它会显示 – Nickool 2011-06-04 06:29:58

+0

,但很好,谢谢 – Nickool 2011-06-04 06:30:21

我不完全相信你的意思,但反正你的情况再次显示按钮,你会删除风格=“visibility:hidden的”

你可以使用一些东西一样了jQuery让你的表单产生一些影响,并让一些CSS看起来有点酷。

+0

我知道只是php和litte的JavaScript现在尝试了解脚本中的jquery – Nickool 2011-06-04 06:38:30

您可以使用特定文本框/ textarea的按键事件,并且每次确保文本区域中都有一些文本。焦点不能确保文本框中有一些文本。或者你可以使用焦点上的模糊,但它不会很好地与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 

    } 


}); 

你需要jquery加载。和给定的功能应该在document.ready