Is there a way to make a form that always begins with https://?-CodePudding

I have a form set up that changes when the value is inputted in settings. The issue is that when someone enters google.com instead of https://google.com, the link doesn't work. I'm wondering if there is any way to have the form always display https:// and the user then inputs their link after.

I want the https:// included in their inputted link, not to go away like with a placeholder. Is there anyway to get this done?

Here is my code for the specific form.

                    type="text"
                    value={logoLink}
                    placeholder="https://yourwebsitehere.com"
                    onChange={(event) => setLogoLink(event.target.value)}
                  />
                  <Button type="submit">Save</Button>

CodePudding user response：

You could remove any text up to and including a "://" and prepend "https://", like:

let s = "google.com";
const re = /^.*://///;
let u = new URL("https://"   s.replace(re, ""));
console.log(u.href);

Outputs:

https://google.com/

and it outputs the same with let s = "http://google.com";.

Or maybe <input type="url"> would work for you to force the user to add the protocol.

CodePudding user response：

You can include the https:// in the value of the input element like this:

<input
  type="text"
  value={`https://${logoLink}`}
  onChange={(event) => setLogoLink(event.target.value)}
/>