Question

我希望input type="button"行为类似于浏览器的链接（因此，可以在输入上右键单击，并查看上下文菜单链接（在新标签页中打开链接，在新窗口中打开链接等）。我有一个带有提交按钮的表单：

<input type="submit" value="Run Query"/>

为了创建链接并拥有此上下文菜单，我将input替换为：

<a href="#" onclick="$(this).parent().submit(); return false;">Run Query</a>

但是这样“在新标签页中打开链接”会打开同一页面（由于href属性）。我知道您只需按住<input type="submit"/>即可在新标签页中将其打开，但如果存在input标记，则Chrome中没有上下文菜单。是否可以创建一个与链接具有相同上下文菜单的输入？或者告诉浏览器将此功能添加到input标记的任何技巧？

Answer 1

如果我正确理解您的问题，您想将表单提交到新标签吗？然后，您可以在表单元素上使用target="_blank"。

<form action="" method="POST" target="_blank" >
    <input type="submit" />
</form>

Answer 2

这将使用查询字符串将每个输入字段的值传递给新窗口或选项卡并提交它。如果您要发布文件，它将无法工作（解决方法是在选择时立即上传文件，给它一个id并将其存储在隐藏字段中，因此文件ID是发布的文件）。

请注意，这是一个示例，您应该使用更好的方法来处理查询字符串和浏览器兼容性（它仅在Chrome上测试）。在发货之前，您应该在其他浏览器中彻底测试它！我也不知道它如何在iOS / Android / Windows手机等浏览器中运行。我想说的是你可能不应该使用它。

<body>
<form action="http://google.com">
<input type="text" name="stuff" value="" />
<input type="text" name="q" value="" />
<a href="#">Submit</a>
</form>

<script>
!function () {
    var form = document.querySelector("form")
    var submitButton = document.querySelector("a")
    var queryString = location.search.slice(1).split("&").reduce(function (seed, str) {
        var pair = str.split("=")
        seed[pair[0]] = decodeURIComponent(pair[1])
        return seed
    }, {})

    Object.keys(queryString).forEach(function (qsKey) {
        var formEl = form.querySelector("[name='" + qsKey + "']")
        if(formEl)
            formEl.value = queryString[qsKey]
    })

    if(queryString.submit)
        form.submit()

    submitButton.addEventListener("contextmenu", updateHref) // Update on right click

    submitButton.addEventListener("click", function (e) {
        if(e.altKey || e.ctrlKey || e.shiftKey || e.which === 2 /* middle mouse button */) {
            updateHref()
        } else {
            e.preventDefault()
            form.submit()
        }
    })

    function updateHref() {
        var values = [].slice.call(form.elements).map(function (el) {
            return el.name + "=" + encodeURIComponent(el.value)
        })
        submitButton.href = location.pathname + "?submit=1&" + values.join("&")
    }
}()
</script>
</body>

是否可以使输入像链接一样（Chrome）

2 个答案: