Javascript/HTML URL 输入转换为超链接

Question

我正在使用目录请求 UI 宏在 ServiceNow 中工作，因此我无法调用 PHP 文件。 我想让用户在输入字段中输入 URL 并自动将其转换为超链接而不点击提交（基本上是在用户离开字段时）。

我尝试使用 javascript 将其放在一起，但我发现我的代码有问题。 输入字段甚至没有出现在页面上

 <?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
<input type="text" id="myAwesomeIdName"></input>
    var val = document.getElementById('myAwesomeIdName').value;
    <a href="&val;&" target="_blank">Link</a>
    </script>
</j:jelly>

Answer 1

我注意到的一件事是你的

<input type="text" id="myAwesomeIdName"></input>

在脚本标签内。 尝试将其向上移动一行，使其不在内部（脚本）。

顺便说一句，我会通过评论提出这个建议，因为它不是对您问题的完整答案，但可能会有所帮助，但不能因为我只有 41 名声望所以不允许发表评论。 希望我没有让任何人生气。 如果您能够将其更改为评论或提出更好的方法，请随意。

Answer 2

您可以在您选择的输入字段上添加事件侦听器，例如输入或更改。 获取值并将其添加到 DOM 或您想用它做什么。 如果您还有其他事情，请知道我会更新答案。

 const input = document.querySelector('input'); const log = document.getElementById('log'); input.addEventListener('change', updateValue); function updateValue(e) { const yourLink = e.target.value const mydiv = document.getElementById("log"); const aTag = document.createElement('a'); aTag.setAttribute('href', yourLink); aTag.textContent = "link text"; mydiv.appendChild(aTag) }

 <input placeholder="Enter some text" name="name" /> <div id="log"></div>