使 HTML 'value' 属性成为链接
我想将 HTML 输入值的输出转换为可点击的链接。
目前，它看起来像：<input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactDetails['contactEmail']; ?>">
我尝试使用 PHP 和 JavaScript 来创建链接，但这最终只是逐字显示 HTML 代码。
可以吗？如果可以，怎么做？
万千封印浏览 154回答 3
3回答
-
紫衣仙女
您不需要输入作为值输出的链接，您需要一个解决方法，这是我的建议：https://jsfiddle.net/4w58ed3o/1/HTML：<div class="box"> <input type="email" id="myinput" value="default@email.com"> <a href="#" id="mylink"></a></div><button id="myswitcher">Edit</button>JS：let input = document.querySelector('#myinput');let link = document.querySelector('#mylink');let myswitcher = document.querySelector('#myswitcher');let setLink = () => { link.innerHTML = input.value; link.setAttribute('href', 'mailto:' + input.value);}input.addEventListener('input', () => { setLink();});setLink();myswitcher.addEventListener('click', () => { document.querySelector('.box').classList.add('editable'); input.focus();});input.addEventListener('blur', () => { document.querySelector('.box').classList.remove('editable');});CSSinput, a { display: inline-block; padding: 0; padding: 10px; margin: 0; text-decoration: none; font-size: 16px; font-family: inherit; box-shadow: none; border: none; line-height: 1.2; background-color: transparent;}input:focus, a:focus { outline: 1px solid #000;}.box { position: relative; display: inline-block;}input { position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%;}.box input { opacity: 0; pointer-events: none;}.box.editable a { opacity: 0; pointer-events: none;}.box.editable input { opacity: 1; pointer-events: auto;}我为您制作了一个可行的实施示例，替换来自服务器的数据并受到我的解决方案的启发。 -
Qyouu
您可以使用 javascript/jquery 来实现相同的目的。<html><body><input type="email" class="form-control" name="contactEmail" value="LINK HERE"><span id="output"></span><script> $(document).ready(function(){ var str = "LINK TITLE HERE"; var valueToLink = $(".form-control").val() //fetches the string to be converted to //link var result = str.link(valueToLink); document.getElementById("output").innerHTML = result; })</script></body></html>您还可以将上述逻辑连接到事件调用，例如按钮单击。 -
猛跑小猪
我认为这是不可能的，但你可以尝试一下。您<?php echo $row_rsContactDetails['contactEmail']; ?>也可以放置“一些文本”。<a href="<?php echo $row_rsContactDetails['contactEmail']; ?>">SOME TEXT</a>
随时随地看视频慕课网APP
PHP