是否可以使输入像链接(Chrome）一样运行

Is it possible to make input act like a link (Chrome)

本文关键字：一样 运行 可以使 Chrome 链接 是否 输入      更新时间：2023-09-26

我想要一个input type="button"像浏览器的链接一样（因此，可以右键单击输入并查看链接的上下文菜单（在新选项卡中打开链接，在新窗口中打开链接等）。我有一个带有提交按钮的表单：

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

为了创建一个链接并拥有这个上下文菜单，我用以下方式替换了input：

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

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

如果我

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

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

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

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

<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>
相关文章：