將 HTML 'value' 屬性設為鏈接
[英]Make HTML 'value' attribute a link
問題描述
我想將 HTML 輸入值的 output 變成可點擊的鏈接。
目前，它<input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactDetails['contactEmail']; ?>">像：
我試過使用 PHP 和 JavaScript 創建鏈接，但這只是逐字顯示 HTML 代碼。
可以做到嗎？如果可以，怎么做？
3 個解決方案
解決方案1
0 2020-08-22 10:39:24
您可以使用 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>
您還可以將上述邏輯連接到事件調用，例如按鈕單擊。
解決方案2
0 已采納 2020-08-22 10:47:59
您不需要輸入指向 output 的鏈接作為值，您需要一個解決方法，這是我的建議：
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>
記者：
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');
});
CSS
input, 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;
}
我為您做了一個實施的工作示例，替換來自服務器的數據並從我的解決方案中得到啟發。
解決方案3
-1 2020-08-22 10:07:11
我不認為這是可能的，但你可以試試這個。 你可以把<?php echo $row_rsContactDetails['contactEmail']; ?> <?php echo $row_rsContactDetails['contactEmail']; ?>也替換為“SOME TEXT”。
<a href="<?php echo $row_rsContactDetails['contactEmail']; ?>">SOME TEXT</a>
產生恆定HTML屬性值的最佳方法
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.