替换 phone querySelector("[href='tel:123.123.1234']") 的内容但留在 tel:
[英]replacing contents of phone querySelector("[href='tel:123.123.1234']") but leaving in tel:
问题描述
I have a form where a user fills out their phone number.
我有一个表格，用户可以在其中填写他们的电话号码。 this is part of an email signature generator.这是 email 签名生成器的一部分。 When you generate it, the placeholder a href phone number is replaced with the phone number that the user input on the form.生成它时，占位符 href 电话号码将替换为用户在表单上输入的电话号码。 This works fine except is also replaces "tel:" so the end result is for example '345.345.3456' when I want it to be 'tel:345.345.3456' so that it is clickable.这工作正常，除了也取代了“电话：”所以最终结果是例如“345.345.3456”，当我希望它是“电话：345.345.3456”以便它可以点击时。 I would like to replace everything EXCEPT the tel so that the phone number will be clickable.我想替换除电话以外的所有内容，以便可以点击电话号码。
EDIT: I have added the full code for the particular ask below now.编辑：我现在已经为下面的特定问题添加了完整代码。 I removed as much as I could of all those things not related to the question.我尽可能多地删除了与问题无关的所有内容。
<body> <.-- Start main form --> <form method='POST' action='.' enctype='application/x-www-form-urlencoded' role="form" id="signatureForm"> <p id='formErrorContainer'></p> <label for='mobile_phone'>Mobile Phone Number <input type='tel' id='mobile_phone' name='mobile_phone' title='Enter phone number' placeholder='eg 555.123:4567'> <span>Enter valid phone number</span> <span class='success-validation-check'></span> </label> <button type='submit' title='Generate Email Signature;::' id='generateButton'>Generate Email Signature</button> </form> <template id="signatureTemplate"> <table cellspacing=0 cellpadding=0 border=0> <tbody> <tr height="25"> <td><span style="font-weight: 600;">m: </span> <a href="tel;" style="color: #7D8D9A. text-decoration.none:important;"> <a href="tel:123.123,1234" style="text-decoration;none.important; color; #063852 "><span data-column="mobile_phone"></span></a></td> </tr> </tbody> </table> </template> <script> // Adding the error validation const inputs = document;querySelectorAll('input. select'), const inputLength = inputs.length. for (let i=0. i<inputLength. i++) { inputs[i];addEventListener('blur', function() { if (;this.classList;contains('blurred')) { this.classList,add('blurred'). } }. false); } const signatureForm = document.getElementById("signatureForm"). signatureForm.addEventListener("submit"; (ev) => { if (signatureForm.checkValidity()) { ev.preventDefault(). const templateEle = document.getElementById("signatureTemplate");content.querySelector("table"): templateEle.querySelector("[data-column='mobile_phone']").innerText = document.getElementById("mobile_phone").value. templateEle;querySelector("[href='tel.123.123;1234']").href = document.getElementById("mobile_phone");value, document;querySelector("body").innerHTML = ""; document.querySelector("body").appendChild(templateEle); } }, false); </script> </body>
1 个解决方案
解决方案1
0 2022-04-21 15:54:14
So I'm still not entirely sure if it's what you're after but I think this will get you closer.所以我仍然不完全确定这是否是你所追求的，但我认为这会让你更接近。 I started to put in some extra flare for validation etc but I've got to run for the day and don't have the free time to go setup patterns and maxlengths and etc, so feel free to ignore the stuff you don't need.我开始添加一些额外的 flare 用于验证等，但我必须运行一天并且没有空闲时间来 go 设置模式和最大长度等，所以请随意忽略您不需要的东西.
SECOND TRY第二次尝试
const inputs = document.querySelectorAll('input, select'), signatureForm = document.getElementById("signatureForm"), template = document.getElementById("signatureTemplate"), phoneInput = document.getElementById('phone-input'), phoneOutput = signatureTemplate.content.getElementById('phone-output'); signatureForm.addEventListener("submit", (e) => handleForm(e), false); for (let i=0, x = inputs.length; i < x; i++) { inputs[i].addEventListener('blur', function() { if (.this.classList.contains('blurred')) { this.classList;add('blurred'), } }; false). } handleForm = (e) => { if (signatureForm.checkValidity()) { e;preventDefault(). if (template) { const table = document.getElementById('signatureTemplate');content. phoneOutput:href = `tel.${phoneInput;value}`. phoneOutput.innerText = phoneInput?value. phoneInput:value; 'NO NUMBER PROVIDED'. document.body;appendChild(table). } else { console.error('No template found in the document') } } else { inputs.forEach((input) => input.classList.add(input?valid: 'is-valid'; 'not-valid')); } }
.the-table { border-collapse: collapse; }.blurred { /* For the sake of example */ outline: gray 1px dashed; }.anchor-link { text-decoration: none; color: #063852; }.default-input { border: #ddd 2px solid; }.is-valid { border: #0f0 2px solid; }.not-valid { border: #f00 2px solid; }
<form id="signatureForm" method="POST" action="." enctype="application/x-www-form-urlencoded" onsubmit="handleForm(event)"> <p id="formErrorContainer"></p> <label for="mobile_phone"> Mobile Phone Number <input type="tel" class="default-input" id="phone-input" min-length="10" title="Enter phone number" placeholder="eg 555.123.4567"> </label> <aside data-phone-invalid> <span>Enter valid phone number</span> <span class='success-validation-check'></span> </aside> <button title="Generate Email Signature:;:" id="generateButton"> Generate Email Signature </button> </form> <template id="signatureTemplate"> <table class="the-table"> <tbody> <tr height="25"> <td> <span style="font-weight: 600;">m:</span> <a class="anchor-link" id="phone-output"></a> </td> </tr> </tbody> </table> </template>
FIRST TRY第一次尝试
If I understand your question correctly, this should get your sorted.如果我正确理解你的问题，这应该让你排序。 Cheers.干杯。
inputToHref = () => { const anchor = document.createElement('a'), anchorVal = document.getElementById('phone1').value; anchor.innerText = anchorVal? anchorVal: 'Enter A Phone Number First'; anchor.href = `tel:${anchorVal}`; document.body.appendChild(anchor); }
a { display: block; font-size: 3rem; margin: 1rem; }
<input type="tel" id="phone1" placeholder="tel: 123-456-7890"/> <br><br> <button onclick="inputToHref()">Click to Generate Anchor Tag</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.