繁体   English   中英

在显示提交按钮的文本区域输入时

[英]when entering on the text area showing a submit button

我想在输入 textarea 时立即显示我可以使用的提交按钮

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

有没有 php 或 javascript 的解决方案?

布雷茨解决方案:

<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>
<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)与行为(通常是<command/> )分开更清晰<command/>元素,它可以让您在 HTML 的特殊部分中分离行为)。

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

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

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

您可以使用 jQuery 轻松完成此操作。

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

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

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

您需要将其包装在准备好的文档 function 中,所以

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

这也需要放置在<head>标记中的<script type="text/javascript">标记中,或者就在结束</body>标记之前。

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

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

更新这是您在JSFIDDLE上的回答的现场演示

我不完全确定你的意思,但无论如何要在你的情况下再次显示按钮,你会删除 style="visibility: hidden"

您可以使用诸如 jquery 之类的东西来使您的 forms 产生一些影响,并使一些 css 看起来有点酷。

您可以对特定的文本框/文本区域使用按键事件,并且每次确保文本区域中有一些文本。 聚焦不会确保文本框有一些文本。 或者您可以使用 on blur with on focus 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

  }


});

您需要加载 jquery。 并给出 function 应该在 document.ready

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM