您可以在URL输入字段中为链接添加名称吗?

Question

我希望我用一种有意义的方式解释这个问题。

你有一个url输入字段。

<input id="myURL" name="myURL" type="url">

如果您在此输入url，例如www.stackoverflow.com，然后输出"www.stackoverflow.com">

但是如果我不想让它显示url，而是显示"Click here"呢?

我知道这可以很容易地完成一个标签，但你如何做到这一点与输入字段?

我在MDN Web Docs上阅读了这个指南https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url但是它并没有给我提供任何关于那个问题的信息。

Answer 1

No.

URL字段用于输入URL，而不是生成由URL和显示文本组成的HTML链接。

如果您还想输入显示文本，请使用单独的文本输入。

Answer 2

你是说这样的东西吗?

document.getElementById("myForm").addEventListener("submit",function(e) {
e.preventDefault();
const url = new URL(this.myURL.value); // possibly a bit overkill but it validates and allows adding parameters
document.getElementById("res").innerHTML = `<a href="${url.toString()}" taget="_blank">Click here</a>`;
})

<form id="myForm">
<input id="myURL" name="myURL" type="url">
</form>
<hr/>
<span id="res"></span>

或

const form = document.getElementById("myForm")
form.addEventListener("submit",function(e) {
e.preventDefault();
const url = new URL(this.myURL.value); // possibly a bit overkill but it validates and allows adding parameters
document.getElementById("res").innerHTML = `<a href="${url.toString()}" taget="_blank">Click here</a>`;
form.hidden = true;
})

<form id="myForm">
<input id="myURL" name="myURL" type="url">
</form>
<span id="res"></span>