Beautiful URL Input Plugin With jQuery - Website Input

Website Input is a tiny jQuery plugin to create a beautiful URL input field that automatically fetches and displays the Favicon (site logo) inside the input based on the website URL you provide.

How to use it:

1. Download the plugin and put the JavaScript file jquery.website-input.js after jQuery.

# NPM
$ npm i jquery-website-input

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.website-input.js"></script>

2. Create a normal input field for the website input.

<input type="text" class="website-input" />

3. Initialize the plugin and determine the initial website URL.

$(document).ready(function () {
  $('.website-input').websiteInput({
    initValue: 'jqueryscript.net'
  })
});

4. Get the website URL you just typed.

$(document).ready(function () {
  $('.website-input').websiteInput({
    initValue: 'jqueryscript.net',
    onChange: (value) => {
      console.log(value)
    }
  })
});

5. Override the default styles of the website input.

$websiteInput__wrapper = $(`<div class="wi__wrapper">`).css({
  display: 'flex',
  alignItems: 'center'
}).appendTo($('.container'))
$websiteInput__input = $(this).css({
  display: 'block',
  border: '1px solid #B0BAC8',
  padding: '.5em .75em',
  borderRadius: '.5em',
  outline: 'none',
  fontSize: '.9em',
  fontWeight: 500,
  fontFamily: 'Arial, Helvetica, sans-serif',
  color: '#2A3E52'
}).appendTo($websiteInput__wrapper)
$websiteInput__website = $(`<div class="wi__website">`).css({
  display: 'none',
  height: 32,
  alignItems: 'center',
  cursor: 'pointer',
  backgroundColor: '#f4f4f4',
  borderRadius: '.5em',
  paddingRight: '.5em'
}).appendTo($websiteInput__wrapper)
$websiteInput__website_wrapper = $(`<div class="wi__website_wrapper">`).css({
  display: 'flex',
  alignItems: 'center'
}).appendTo($websiteInput__website)
$websiteInput__website_logo_wrapper = $(`<div class="wi__website_logo_wrapper">`).css({
  display: 'flex',
  border: '1px solid',
  borderColor: '#B0BAC8',
  backgroundColor: '#fff',
  padding: '.5em',
  boxShadow: '0 .125rem .25rem rgba(0,0,0,.075)',
  borderRadius: '.5em',
  transition: 'border .2s ease-out'
}).appendTo($websiteInput__website_wrapper)
$websiteInput__website_logo = $(`<img width="16" height="16" src="" alt="favicon">`).appendTo($websiteInput__website_logo_wrapper)
$websiteInput__website_edit = $(`<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.394 19.75l-5.481 1.308 1.239-5.551L14.758 4.9l4.243 4.243L8.394 19.749v.001zM6.98 15.506l1.414 1.414 7.779-7.778-1.415-1.415-7.778 7.779zM19.708 1.364l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242 2.12-2.122a1 1 0 0 1 1.415 0z" fill="#4F8DF9" fill-rule="nonzero" fill-opacity="1"></path></svg>`).appendTo($websiteInput__website_logo_wrapper)
$websiteInput__website_text = $(`<span class="wi__text">`).css({
  paddingLeft: '.5em',
  fontSize: '.9em',
  fontWeight: 500,
  fontFamily: 'Arial, Helvetica, sans-serif',
  color: '#2A3E52'
}).appendTo($websiteInput__website_wrapper)
$websiteInput__website_close = $(`<div class="wi__close"><svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.97 6.657a8.003 8.003 0 0 0-11.313 0 8.003 8.003 0 0 0 0 11.314 8.003 8.003 0 0 0 11.314 0 8.003 8.003 0 0 0 0-11.314zm-3.394 9.05l-2.262-2.262-2.263 2.263-1.131-1.132 2.262-2.262L8.92 10.05 10.05 8.92l2.263 2.262 2.262-2.262 1.132 1.131-2.263 2.263 2.263 2.262-1.132 1.132z" fill="currentColor" fill-rule="nonzero"></path></svg></div>`).css({
  marginLeft: '.5em',
  fontSize: '.75em',
  color: '#B0BAC8'
}).appendTo($websiteInput__website)

---

This awesome jQuery plugin is developed by hxutixnnn. For more Advanced Usages, please check the demo page or visit the official website.