如何将当前URL设置到HTML input或textarea标签而非p标签？

很简单的调整，我给你两种常用的实现方式，分别对应input和textarea标签，你可以根据需求选择：

核心逻辑还是获取当前页面URL，只是把原本给p标签赋值的逻辑，改成给input/textarea的value属性赋值即可，下面是具体代码示例：

1. 写入input标签 #

首先在HTML中准备好目标input元素（建议加个id方便JS精准定位）：

<!-- 可选：加上readonly属性，防止用户误修改URL -->
<input type="text" id="targetUrlInput" readonly placeholder="当前页面URL会显示在这里">

然后用JavaScript完成获取URL和赋值的操作：

// 获取当前页面的完整URL（包含协议、域名、路径等所有内容）
const currentPageUrl = window.location.href;
// 找到目标input元素
const urlInputElement = document.getElementById('targetUrlInput');
// 将URL赋值给input的value属性
urlInputElement.value = currentPageUrl;

2. 写入textarea标签 #

同样先准备好textarea元素：

<!-- 可选：设置readonly和行数，优化展示效果 -->
<textarea id="targetUrlTextarea" rows="2" readonly placeholder="当前页面URL会显示在这里"></textarea>

对应的JavaScript代码：

const currentPageUrl = window.location.href;
const urlTextareaElement = document.getElementById('targetUrlTextarea');
// textarea同样通过value属性赋值
urlTextareaElement.value = currentPageUrl;

额外小提示 #

• 如果需要确保页面元素加载完成后再执行代码，可以把JS逻辑放在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  const currentPageUrl = window.location.href;
  document.getElementById('targetUrlInput').value = currentPageUrl;
});

• 如果没有给元素加id，也可以用其他选择器，比如document.querySelector('input[name="page-url"]')，只要能精准定位到目标元素就行。

内容的提问来源于stack exchange，提问作者Khan