替換 phone querySelector("[href='tel:123.123.1234']") 的內容但留在 tel:

Question

我有一個表格，用戶可以在其中填寫他們的電話號碼。 這是 email 簽名生成器的一部分。 生成它時，占位符 href 電話號碼將替換為用戶在表單上輸入的電話號碼。 這工作正常，除了也取代了“電話：”所以最終結果是例如“345.345.3456”，當我希望它是“電話：345.345.3456”以便它可以點擊時。 我想替換除電話以外的所有內容，以便可以點擊電話號碼。

編輯：我現在已經為下面的特定問題添加了完整代碼。 我盡可能多地刪除了與問題無關的所有內容。

 <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>

Answer 1

所以我仍然不完全確定這是否是你所追求的，但我認為這會讓你更接近。 我開始添加一些額外的 flare 用於驗證等，但我必須運行一天並且沒有空閑時間來 go 設置模式和最大長度等，所以請隨意忽略您不需要的東西.

第二次嘗試

 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>

第一次嘗試

如果我正確理解你的問題，這應該讓你排序。 干杯。

 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>

替換 phone querySelector("[href='tel:123.123.1234']") 的內容但留在 tel:

問題描述

1 個解決方案

解決方案1
0 2022-04-21 15:54:14

替換 phone querySelector("[href='tel:123.123.1234']") 的內容但留在 tel:

問題描述

1 個解決方案

解決方案1 0 2022-04-21 15:54:14

解決方案1
0 2022-04-21 15:54:14