I have a form where I want to add symbol on the input focus & want to add user data with sign on console,

form.addEventListener('submit', (e) => {
  var phone = document.getElementById('number').value;
  console.log(phone);
});

<form id="form" action="/" method="post">
  <div >
    <input type="text" id="number" required/><span></span><label>Phone Number<sup  id="error_sup_phone">*</sup> <span id="PhoneNumberErrorMessage" ></span></label>
  </div>

  <button type="submit" >Register Now</button>
</form>

CodePudding user response：

Something like this?

window.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("form");
  const phoneField = document.getElementById('number');
  form.addEventListener('submit', (e) => {
    const phone = phoneField.value
    console.log(phone);
  });
  phoneField.addEventListener("focus", (e) => {
    e.target.value = " "
  });
});

<form id="form" action="/" method="post">
  <div >
    <input type="text" id="number" required/><span></span>
    <label>Phone Number<sup  id="error_sup_phone">*</sup> <span id="PhoneNumberErrorMessage" ></span></label>
  </div>

  <button type="submit" >Register Now</button>
</form>

CodePudding user response：

If you want to help the user enter the right format by starting them off by adding a automatically, that’s great. But you should communicate the expected format in any case, and also provide some validation.

Additionally, I assume you’d only want to add a plus if the field is empty?

document.querySelector('#number').addEventListener('focus', e => {
  const i = e.currentTarget;
  if (i.value === "") i.value = " ";
});

<form id="form" action="/" method="post">
  <div >
    <input type="text" id="number" required placeholder=" 12 4567890" /><span></span><label>Phone Number<sup  id="error_sup_phone">*</sup> ( 12 34567890) <span id="PhoneNumberErrorMessage" ></span></label>
  </div>

  <button type="submit" >Register Now</button>
</form>

Did you consider using

Separate the country code from the number

The validation of international telephone numbers is difficult, due to different formats. You risk excluding valid numbers by enforcing too much. Even letters are valid parts of phone numbers, used especially in the USA.

Hence, validating whether the user actually put in a country code ore simply added a is very difficult. So it became a best practice to separate the country code from the number.

Especially since most people do not dial out of their country on a regular basis and don’t even know their country code, combining them into one list is helpful:

<form id="form" action="/" method="post">
  <div >
      <select aria-label="Country Code">
        <option value=" 1"> 1 USA and Canada</option>
        <option value=" 33"> 33 France</option>
        <option value=" 49"> 49 Germany</option>
      </select>
    <input type="text" id="number" required />
    <label>Phone Number<sup  aria-hidden="true" id="error_sup_phone">*</sup> <span id="PhoneNumberErrorMessage" ></span></label>
  </div>

  <button type="submit" >Register Now</button>
</form>

CodePudding user response：

you can use below code for this.

   jQuery("#number").on("focus", function () {
        jQuery(this).val(" ");
});