隐藏HTML表单的提交按钮

Question

隐藏HTML表单的提交按钮

6

可能是重复问题：
在没有提交按钮的情况下，使表单在按下回车键时提交

我正在尝试实现一个带有不可见提交功能的文本输入框。因此，该字段没有附加提交按钮，并且在按下“enter”键时提交。

这是我想要代码如何运作的示例：

<form method="get" action="<?php bloginfo('home'); ?>/"><p>

<input class="text_input" type="text" value="SEARCH: type &amp; hit Enter" name="s" id="s" onfocus="if 
(this.value == 'SEARCH: type &amp; hit Enter') {this.value = '';}" onblur="if (this.value == '') 
{this.value = 'SEARCH: type &amp; hit Enter';}" />

<input type="hidden" id="searchsubmit" value="" /></p></form>

这是我无法让其工作的代码：

<p>Have us call you. Input your number:</p>
<input type="text" id="phone" name="phone" maxlength="10" size="10">
<input type="submit" value="Click-to-Call"  onclick="window.open('http://secure.ifbyphone.com/clickto_status.php?click_id=34124&phone_to_call=' + getElementById('phone').value + '&key=asdfjknj3459dj38sdka92bva', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">

我尝试使用GET请求将表单属性添加到“onclick”部分的URL中，但无效。

有什么想法可以使其正常工作吗？

- Trent Scott

2

我有点困惑。如果你不想要一个提交按钮，为什么不直接省略掉呢？ - MrGlass

示例代码可以正常运行。看起来你的代码是在提交按钮的onclick事件上实现的，你想让它在输入框的onblur事件上发生吗？ - jarchuleta

如果我在这里删除提交，则“onclick”部分中的代码将不存在（这是必需的）。 - Trent Scott

@TrentScott 你可以在表单标签中使用 onsubmit="" 来放置 JavaScript 代码，这样当表单提交时它就会被执行。 - MrGlass

@MrGlass 感谢你的建议。将JS放置在输入框的[code]onsubmit = ""[/code]中并不起作用，但在[code]onblur = ""[/code]中起作用。然而，在工作时，仅当用户点击输入框外部时才有效，按Enter键无效。 - Trent Scott

显示剩余3条评论

2个回答

1

如果想要隐藏某些内容，可以使用以下代码：

input[type=submit]
{
    display:hidden;
}

input[type=submit] 只是一个示例，将其替换为您的提交按钮选择器。

希望这可以帮助到您。

- starbeamrainbowlabs

3

不幸的是，这样做会禁用当按下“Enter”键时提交字段的功能。我也以为那样做能行... - Trent Scott

1

哦，亲爱的。编辑一下帖子，你能试试display: hidden吗？要不你可以使用一个事件监听器通过JavaScript提交表单来模拟这个效果。 - starbeamrainbowlabs

1

我尝试了visibility:hidden和display:none。两者都移除了按钮，但同时也失去了按回车键提交的功能。还有其他想法吗？这是一个演示：http://rainleader.com（在右边栏）。 - Trent Scott

你似乎已经用搜索框完成了它，所以你可以尝试一下。 - starbeamrainbowlabs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Noel · Accepted Answer

将以下内容添加到您的CSS中，对于ID为searchsubmit的元素：

    #searchsubmit
    {    
        visibility: hidden;
    }

onBlur函数可能会触发您想要的操作。当用户离开输入字段（点击其他地方）时会触发onBlur事件

您可以尝试使用JQuery：

$(function() {
$('form').each(function() {
    $('input').keypress(function(e) {
        // Enter pressed?
        if(e.which == 10 || e.which == 13) {
            this.form.submit();
        }
    });

    $('input[type=submit]').hide();
});

});

这将触发表单的onSubmit事件，但你可以进行更改。

this.form.submit

循环

$('#phone').blur()

http://api.jquery.com/blur/

尝试添加以下JavaScript脚本块：

   document.getElementsById('phone')[0].onkeydown= function(event)
{
    if (event == undefined)
    {    
        event = window.event;
    }

    if (event.keyCode == 13)
    {
        var js_phone = document.getElementsByName('phone')[0].value;
        window.location = 'myPage.php?phone='+js_phone;
        return false;
    }
};