GSAP 和 querySelectorAll 未触发动态添加的字段
GSAP and querySelectorAll not firing on dynamically added fields
我正在尝试使用此代码笔 https://codepen.io/aaroniker/pen/WNxoovJ 中的代码，它在 div 和 class url-input 内的输入字段上运行良好，如代码笔中所示.但是，当我将它全部放在 ID 为 wrapper 的 div 中并添加一个 jquery-clone 函数来复制 div.url-input 时，它成功地复制了 HTML 但所有功能都停止为动态添加的字段工作。我在页面的其余部分使用 jQuery，但此代码笔使用普通的 javascript.
我怀疑这也是 forEach 循环内事件侦听器的问题。这是我尝试过的：
我试过
而不是第 21 行的 document.querySelectorAll('.url-input').forEach(elem => {
document.querySelectorAll('#wrapper').forEach(elem => {
然后是第 23、23、25 和 27 行，我使用了后代选择器，例如elem.querySelector('.url-input .icon') 而不是 elem.querySelector('.icon')
当我尝试上述操作时，即使是初始的 url-input 字段也停止工作，动态字段也没有触发。我如何将此代码合并到可以动态添加多个 url-input div 的包装器中？
编辑：这里是所有代码，包括克隆过程的脚本。 “template”标签包含用于 url 输入字段的 HTML 模板的缩小版本，以便于克隆。我还缩小了 CSS 样式，以在此处保存 space。
<html>
<head>
<style>
<!-- From https://codepen.io/aaroniker/pen/WNxoovJ -->
.url-input{--background: #fff; --border-default: #E1E6F9; --border-active: #275EFE; --text-color: #646B8C; --placeholder-color: #BBC1E1; --icon: #275EFE; --close: #646B8C; --close-light: #A6ACCD; --close-background: #EFF2FB; width: 100%; max-width: 240px; display: flex; align-items: center; position: relative; border-radius: 8px; background: var(--background); box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default)); transition: box-shadow 0.2s; --favicon-scale: 0; --icon-offset: 0px; --clear-x: 0px; --clear-swipe-left: 0px; --clear-swipe-x: 0; --clear-swipe: 0px; --clear-scale: 0; --clear-rotate: 0deg; --clear-opacity: 0; --clear-arrow-o: 1; --clear-arrow-x: 0px; --clear-arrow-y: 0px; --clear-arrow-offset: 4px; --clear-arrow-offset-second: 4px; --clear-line-array: 8.5px; --clear-line-offset: 27px; --clear-long-array: 8.5px; --clear-long-offset: 24px;}.url-input.clearing, .url-input:focus-within{--border-width: 1.5px; --border: var(--border-active);}.url-input.clearing{--close-background: transparent; --clear-arrow-stroke: var(--close-light);}.url-input .icon{position: absolute; left: 15px; top: 15px; pointer-events: none;}.url-input .icon svg,.url-input .icon img{display: block; width: 18px; height: 18px;}.url-input .icon svg{fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--icon);}.url-input .icon svg path{stroke-dasharray: 24px; stroke-dashoffset: var(--icon-offset);}.url-input .icon .favicon{position: absolute; left: 0; top: 0; transform: scale(var(--favicon-scale)) translateZ(0);}.url-input .text{flex-grow: 1;}.url-input .text input{-webkit-appearance: none; line-height: 24px; background: none; border: none; outline: none; display: block; width: 100%; margin: 0; padding: 12px 12px 12px 44px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-color);}.url-input .text input::-moz-placeholder{color: var(--placeholder-color);}.url-input .text input:-ms-input-placeholder{color: var(--placeholder-color);}.url-input .text input::placeholder{color: var(--placeholder-color);}.url-input .clear{-webkit-appearance: none; position: relative; z-index: 1; padding: 0; margin: 12px 12px 12px 0; border: none; outline: none; background: var(--b, transparent); transition: background 0.2s; border-radius: 6px; opacity: var(--clear-opacity); transform: scale(var(--clear-scale)) translateZ(0);}.url-input .clear:before{content: ""; position: absolute; top: 0; bottom: 0; right: 12px; left: var(--clear-swipe-left); background: var(--background); transform-origin: 100% 50%; transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);}.url-input .clear svg{display: block; position: relative; z-index: 1; width: 24px; height: 24px; outline: none; cursor: pointer; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--close); transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);}.url-input .clear svg path{transition: stroke 0.2s;}.url-input .clear svg path.arrow{stroke: var(--clear-arrow-stroke, var(--close)); stroke-dasharray: 4px; stroke-dashoffset: var(--clear-arrow-offset); opacity: var(--clear-arrow-o); transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);}.url-input .clear svg path.arrow:last-child{stroke-dashoffset: var(--clear-arrow-offset-second);}.url-input .clear svg path.line{stroke-dasharray: var(--clear-line-array) 28.5px; stroke-dashoffset: var(--clear-line-offset);}.url-input .clear svg path.long{stroke: var(--clear-arrow-stroke, var(--close)); stroke-dasharray: var(--clear-long-array) 15.5px; stroke-dashoffset: var(--clear-long-offset); opacity: var(--clear-arrow-o); transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);}.url-input .clear:hover{--b: var(--close-background);}
</style>
</head>
<body>
<!-- Modified from https://codepen.io/aaroniker/pen/WNxoovJ -->
<div id="wrapper">
<a href="javascript:;" id="cloner">Make copy</a>
<div class="url-input">
<div class="icon">
<svg viewBox="0 0 18 18">
<path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
<path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
</svg>
<div class="favicon"></div>
</div>
<div class="text">
<input type="text" placeholder="Your URL" />
</div>
<button class="clear">
<svg viewBox="0 0 24 24">
<path class="line" d="M2 2L22 22" />
<path class="long" d="M9 15L20 4" />
<path class="arrow" d="M13 11V7" />
<path class="arrow" d="M17 11H13" />
</svg>
</button>
</div>
</div>
<template id="url-template" style="display:none;">
<div class="url-input"> <div class="icon"> <svg viewBox="0 0 18 18"> <path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001"/> <path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75"/> </svg> <div class="favicon"></div></div><div class="text"> <input type="text" placeholder="Your URL"/> </div><button class="clear"> <svg viewBox="0 0 24 24"> <path class="line" d="M2 2L22 22"/> <path class="long" d="M9 15L20 4"/> <path class="arrow" d="M13 11V7"/> <path class="arrow" d="M17 11H13"/> </svg> </button> </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script>
// From https://codepen.io/aaroniker/pen/WNxoovJ
const { to, set, timeline } = gsap
function validURL(str) {
let pattern = new RegExp('^(https?:\/\/)?'+
'((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+
'((\d{1,3}\.){3}\d{1,3}))'+
'(\:\d+)?(\/[-a-z\d%_.~+]*)*'+
'(\?[;&a-z\d%_.~+=-]*)?'+
'(\#[-a-z\d_]*)?$','i')
return !!pattern.test(str)
}
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
document.querySelectorAll('.url-input').forEach(elem => {
let icon = elem.querySelector('.icon'),
favicon = icon.querySelector('.favicon'),
clear = elem.querySelector('.clear'),
input = elem.querySelector('input'),
{ classList } = elem,
svgLine = clear.querySelector('.line'),
svgLineProxy = new Proxy({
x: null
}, {
set(target, key, value) {
target[key] = value
if(target.x !== null) {
svgLine.setAttribute('d', getPath(target.x, .1925))
}
return true
},
get(target, key) {
return target[key]
}
})
svgLineProxy.x = 0
input.addEventListener('input', delay(e => {
let bool = input.value.length,
valid = validURL(input.value)
to(elem, {
'--clear-scale': bool ? 1 : 0,
duration: bool ? .5 : .15,
ease: bool ? 'elastic.out(1, .7)' : 'none'
})
to(elem, {
'--clear-opacity': bool ? 1 : 0,
duration: .15
})
to(elem, {
'--icon-offset': valid ? '24px' : '0px',
duration: .15,
delay: valid ? 0 : .2
})
if(valid) {
if(favicon.querySelector('img')) {
favicon.querySelector('img').src = 'https://f1.allesedv.com/64/' + input.value
return
}
let img = new Image()
img.onload = () => {
favicon.appendChild(img)
to(elem, {
'--favicon-scale': 1,
duration: .5,
delay: .2,
ease: 'elastic.out(1, .7)'
})
}
img.src = 'https://f1.allesedv.com/64/' + input.value
} else {
if(favicon.querySelector('img')) {
to(elem, {
'--favicon-scale': 0,
duration: .15,
onComplete() {
favicon.querySelector('img').remove()
}
})
}
}
}, 250))
clear.addEventListener('click', e => {
classList.add('clearing')
set(elem, {
'--clear-swipe-left': (input.offsetWidth - 44) * -1 + 'px'
})
to(elem, {
keyframes: [{
'--clear-rotate': '45deg',
duration: .25
}, {
'--clear-arrow-x': '2px',
'--clear-arrow-y': '-2px',
duration: .15
}, {
'--clear-arrow-x': '-3px',
'--clear-arrow-y': '3px',
'--clear-swipe': '-3px',
duration: .15,
onStart() {
to(svgLineProxy, {
x: 3,
duration: .1,
delay: .05
})
}
}, {
'--clear-swipe-x': 1,
'--clear-x': (input.offsetWidth - 32) * -1 + 'px',
duration: .45,
onComplete() {
input.value = ''
input.focus()
if(favicon.querySelector('img')) {
to(elem, {
'--favicon-scale': 0,
duration: .15,
onComplete() {
favicon.querySelector('img').remove()
}
})
to(elem, {
'--icon-offset': '0px',
'--icon-offset-line': '0px',
duration: .15,
delay: .2
})
}
to(elem, {
'--clear-arrow-offset': '4px',
'--clear-arrow-offset-second': '4px',
'--clear-line-array': '8.5px',
'--clear-line-offset': '27px',
'--clear-long-offset': '24px',
'--clear-rotate': '0deg',
'--clear-arrow-o': 1,
duration: 0,
delay: .7,
onStart() {
classList.remove('clearing')
}
})
to(elem, {
'--clear-opacity': 0,
duration: .2,
delay: .55
})
to(elem, {
'--clear-arrow-o': 0,
'--clear-arrow-x': '0px',
'--clear-arrow-y': '0px',
'--clear-swipe': '0px',
duration: .15
})
to(svgLineProxy, {
x: 0,
duration: .45,
ease: 'elastic.out(1, .75)'
})
}
}, {
'--clear-swipe-x': 0,
'--clear-x': '0px',
duration: .4,
delay: .35
}]
})
to(elem, {
'--clear-arrow-offset': '0px',
'--clear-arrow-offset-second': '8px',
'--clear-line-array': '28.5px',
'--clear-line-offset': '57px',
'--clear-long-offset': '17px',
duration: .2
})
})
})
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(x, smoothing) {
return [
[2, 2],
[12 - x, 12 + x],
[22, 22]
].reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '')
}
</script>
<script>
// jQuery 3.5.1 has already been included
$('#cloner').click(function(e){
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
})
</script>
</body>
</html>
document.querySelectorAll只在脚本启动时调用一次，因此每次创建新输入时都必须再次执行。
所以为了避免重写你的代码，
您只需将 querySelectorAll 的初始化封装在一个函数中
function initInput() {
document.querySelectorAll(".url-input").forEach((elem) => {
:
:
to(elem, {
"--clear-arrow-offset": "0px",
"--clear-arrow-offset-second": "8px",
"--clear-line-array": "28.5px",
"--clear-line-offset": "57px",
"--clear-long-offset": "17px",
duration: 0.2,
});
});//end clear.addEventListener
});//end queryselectorAll
}
并且您在脚本开头和克隆器中调用它：
jQuery(function () {
const { to, set, timeline } = gsap;
initInput();
$("#cloner").click(function (e) {
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
initInput();
});
:
:
const { to, set, timeline } = gsap;
initInput();
$("#cloner").click(function (e) {
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
initInput();
});
function validURL(str) {
let pattern = new RegExp(
"^(https?:\/\/)?" +
"((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|" +
"((\d{1,3}\.){3}\d{1,3}))" +
"(\:\d+)?(\/[-a-z\d%_.~+]*)*" +
"(\?[;&a-z\d%_.~+=-]*)?" +
"(\#[-a-z\d_]*)?$",
"i"
);
return !!pattern.test(str);
}
function delay(fn, ms) {
let timer = 0;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(fn.bind(this, ...args), ms || 0);
};
}
function initInput() {
document.querySelectorAll(".url-input").forEach((elem) => {
let icon = elem.querySelector(".icon"),
favicon = icon.querySelector(".favicon"),
clear = elem.querySelector(".clear"),
input = elem.querySelector("input"),
{ classList } = elem,
svgLine = clear.querySelector(".line"),
svgLineProxy = new Proxy(
{
x: null,
},
{
set(target, key, value) {
target[key] = value;
if (target.x !== null) {
svgLine.setAttribute("d", getPath(target.x, 0.1925));
}
return true;
},
get(target, key) {
return target[key];
},
}
);
svgLineProxy.x = 0;
input.addEventListener(
"input",
delay((e) => {
let bool = input.value.length,
valid = validURL(input.value);
to(elem, {
"--clear-scale": bool ? 1 : 0,
duration: bool ? 0.5 : 0.15,
ease: bool ? "elastic.out(1, .7)" : "none",
});
to(elem, {
"--clear-opacity": bool ? 1 : 0,
duration: 0.15,
});
to(elem, {
"--icon-offset": valid ? "24px" : "0px",
duration: 0.15,
delay: valid ? 0 : 0.2,
});
if (valid) {
if (favicon.querySelector("img")) {
favicon.querySelector("img").src =
"https://f1.allesedv.com/64/" + input.value;
return;
}
let img = new Image();
img.onload = () => {
favicon.appendChild(img);
to(elem, {
"--favicon-scale": 1,
duration: 0.5,
delay: 0.2,
ease: "elastic.out(1, .7)",
});
};
img.src = "https://f1.allesedv.com/64/" + input.value;
} else {
if (favicon.querySelector("img")) {
to(elem, {
"--favicon-scale": 0,
duration: 0.15,
onComplete() {
favicon.querySelector("img").remove();
},
});
}
}
}, 250)
);
clear.addEventListener("click", (e) => {
classList.add("clearing");
set(elem, {
"--clear-swipe-left": (input.offsetWidth - 44) * -1 + "px",
});
to(elem, {
keyframes: [
{
"--clear-rotate": "45deg",
duration: 0.25,
},
{
"--clear-arrow-x": "2px",
"--clear-arrow-y": "-2px",
duration: 0.15,
},
{
"--clear-arrow-x": "-3px",
"--clear-arrow-y": "3px",
"--clear-swipe": "-3px",
duration: 0.15,
onStart() {
to(svgLineProxy, {
x: 3,
duration: 0.1,
delay: 0.05,
});
},
},
{
"--clear-swipe-x": 1,
"--clear-x": (input.offsetWidth - 32) * -1 + "px",
duration: 0.45,
onComplete() {
input.value = "";
input.focus();
if (favicon.querySelector("img")) {
to(elem, {
"--favicon-scale": 0,
duration: 0.15,
onComplete() {
favicon.querySelector("img").remove();
},
});
to(elem, {
"--icon-offset": "0px",
"--icon-offset-line": "0px",
duration: 0.15,
delay: 0.2,
});
}
to(elem, {
"--clear-arrow-offset": "4px",
"--clear-arrow-offset-second": "4px",
"--clear-line-array": "8.5px",
"--clear-line-offset": "27px",
"--clear-long-offset": "24px",
"--clear-rotate": "0deg",
"--clear-arrow-o": 1,
duration: 0,
delay: 0.7,
onStart() {
classList.remove("clearing");
},
});
to(elem, {
"--clear-opacity": 0,
duration: 0.2,
delay: 0.55,
});
to(elem, {
"--clear-arrow-o": 0,
"--clear-arrow-x": "0px",
"--clear-arrow-y": "0px",
"--clear-swipe": "0px",
duration: 0.15,
});
to(svgLineProxy, {
x: 0,
duration: 0.45,
ease: "elastic.out(1, .75)",
});
},
},
{
"--clear-swipe-x": 0,
"--clear-x": "0px",
duration: 0.4,
delay: 0.35,
},
],
});
to(elem, {
"--clear-arrow-offset": "0px",
"--clear-arrow-offset-second": "8px",
"--clear-line-array": "28.5px",
"--clear-line-offset": "57px",
"--clear-long-offset": "17px",
duration: 0.2,
});
});
});
}
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(
Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)
),
angle: Math.atan2(n[1] - p[1], n[0] - p[0]),
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [
current[0] + Math.cos(angle) * length,
current[1] + Math.sin(angle) * length,
];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(x, smoothing) {
return [
[2, 2],
[12 - x, 12 + x],
[22, 22],
].reduce(
(acc, point, i, a) =>
i === 0
? `M ${point[0]},${point[1]}`
: `${acc} ${getPoint(point, i, a, smoothing)}`,
""
);
}
.url-input {
--background: #fff;
--border-default: #E1E6F9;
--border-active: #275EFE;
--text-color: #646B8C;
--placeholder-color: #BBC1E1;
--icon: #275EFE;
--close: #646B8C;
--close-light: #A6ACCD;
--close-background: #EFF2FB;
width: 100%;
max-width: 240px;
display: flex;
align-items: center;
position: relative;
border-radius: 8px;
background: var(--background);
box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
transition: box-shadow 0.2s;
--favicon-scale: 0;
--icon-offset: 0px;
--clear-x: 0px;
--clear-swipe-left: 0px;
--clear-swipe-x: 0;
--clear-swipe: 0px;
--clear-scale: 0;
--clear-rotate: 0deg;
--clear-opacity: 0;
--clear-arrow-o: 1;
--clear-arrow-x: 0px;
--clear-arrow-y: 0px;
--clear-arrow-offset: 4px;
--clear-arrow-offset-second: 4px;
--clear-line-array: 8.5px;
--clear-line-offset: 27px;
--clear-long-array: 8.5px;
--clear-long-offset: 24px;
}
.url-input.clearing, .url-input:focus-within {
--border-width: 1.5px;
--border: var(--border-active);
}
.url-input.clearing {
--close-background: transparent;
--clear-arrow-stroke: var(--close-light);
}
.url-input .icon {
position: absolute;
left: 15px;
top: 15px;
pointer-events: none;
}
.url-input .icon svg, .url-input .icon img {
display: block;
width: 18px;
height: 18px;
}
.url-input .icon svg {
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--icon);
}
.url-input .icon svg path {
stroke-dasharray: 24px;
stroke-dashoffset: var(--icon-offset);
}
.url-input .icon .favicon {
position: absolute;
left: 0;
top: 0;
transform: scale(var(--favicon-scale)) translateZ(0);
}
.url-input .text {
flex-grow: 1;
}
.url-input .text input {
-webkit-appearance: none;
line-height: 24px;
background: none;
border: none;
outline: none;
display: block;
width: 100%;
margin: 0;
padding: 12px 12px 12px 44px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
}
.url-input .text input::-moz-placeholder {
color: var(--placeholder-color);
}
.url-input .text input:-ms-input-placeholder {
color: var(--placeholder-color);
}
.url-input .text input::placeholder {
color: var(--placeholder-color);
}
.url-input .clear {
-webkit-appearance: none;
position: relative;
z-index: 1;
padding: 0;
margin: 12px 12px 12px 0;
border: none;
outline: none;
background: var(--b, transparent);
transition: background 0.2s;
border-radius: 6px;
opacity: var(--clear-opacity);
transform: scale(var(--clear-scale)) translateZ(0);
}
.url-input .clear:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 12px;
left: var(--clear-swipe-left);
background: var(--background);
transform-origin: 100% 50%;
transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
}
.url-input .clear svg {
display: block;
position: relative;
z-index: 1;
width: 24px;
height: 24px;
outline: none;
cursor: pointer;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--close);
transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);
}
.url-input .clear svg path {
transition: stroke 0.2s;
}
.url-input .clear svg path.arrow {
stroke: var(--clear-arrow-stroke, var(--close));
stroke-dasharray: 4px;
stroke-dashoffset: var(--clear-arrow-offset);
opacity: var(--clear-arrow-o);
transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.url-input .clear svg path.arrow:last-child {
stroke-dashoffset: var(--clear-arrow-offset-second);
}
.url-input .clear svg path.line {
stroke-dasharray: var(--clear-line-array) 28.5px;
stroke-dashoffset: var(--clear-line-offset);
}
.url-input .clear svg path.long {
stroke: var(--clear-arrow-stroke, var(--close));
stroke-dasharray: var(--clear-long-array) 15.5px;
stroke-dashoffset: var(--clear-long-offset);
opacity: var(--clear-arrow-o);
transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.url-input .clear:hover {
--b: var(--close-background);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<a href="javascript:;" id="cloner">Make copy</a>
<div class="url-input">
<div class="icon">
<svg viewBox="0 0 18 18">
<path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
<path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
</svg>
<div class="favicon"></div>
</div>
<div class="text">
<input type="text" placeholder="Your URL" />
</div>
<button class="clear">
<svg viewBox="0 0 24 24">
<path class="line" d="M2 2L22 22" />
<path class="long" d="M9 15L20 4" />
<path class="arrow" d="M13 11V7" />
<path class="arrow" d="M17 11H13" />
</svg>
</button>
</div>
</div>
<!-- <template id="url-template" style="display:none;"> -->
<template id="url-template" style="display:none;">
<div class="url-input"> <div class="icon"> <svg viewBox="0 0 18 18"> <path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001"/> <path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75"/> </svg> <div class="favicon"></div></div><div class="text"> <input type="text" placeholder="Your URL"/> </div><button class="clear"> <svg viewBox="0 0 24 24"> <path class="line" d="M2 2L22 22"/> <path class="long" d="M9 15L20 4"/> <path class="arrow" d="M13 11V7"/> <path class="arrow" d="M17 11H13"/> </svg> </button> </div>
</template>
我正在尝试使用此代码笔 https://codepen.io/aaroniker/pen/WNxoovJ 中的代码，它在 div 和 class url-input 内的输入字段上运行良好，如代码笔中所示.但是，当我将它全部放在 ID 为 wrapper 的 div 中并添加一个 jquery-clone 函数来复制 div.url-input 时，它成功地复制了 HTML 但所有功能都停止为动态添加的字段工作。我在页面的其余部分使用 jQuery，但此代码笔使用普通的 javascript.
我怀疑这也是 forEach 循环内事件侦听器的问题。这是我尝试过的： 我试过
而不是第 21 行的document.querySelectorAll('.url-input').forEach(elem => {
document.querySelectorAll('#wrapper').forEach(elem => {
然后是第 23、23、25 和 27 行，我使用了后代选择器，例如elem.querySelector('.url-input .icon') 而不是 elem.querySelector('.icon')
当我尝试上述操作时，即使是初始的 url-input 字段也停止工作，动态字段也没有触发。我如何将此代码合并到可以动态添加多个 url-input div 的包装器中？
编辑：这里是所有代码，包括克隆过程的脚本。 “template”标签包含用于 url 输入字段的 HTML 模板的缩小版本，以便于克隆。我还缩小了 CSS 样式，以在此处保存 space。
<html>
<head>
<style>
<!-- From https://codepen.io/aaroniker/pen/WNxoovJ -->
.url-input{--background: #fff; --border-default: #E1E6F9; --border-active: #275EFE; --text-color: #646B8C; --placeholder-color: #BBC1E1; --icon: #275EFE; --close: #646B8C; --close-light: #A6ACCD; --close-background: #EFF2FB; width: 100%; max-width: 240px; display: flex; align-items: center; position: relative; border-radius: 8px; background: var(--background); box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default)); transition: box-shadow 0.2s; --favicon-scale: 0; --icon-offset: 0px; --clear-x: 0px; --clear-swipe-left: 0px; --clear-swipe-x: 0; --clear-swipe: 0px; --clear-scale: 0; --clear-rotate: 0deg; --clear-opacity: 0; --clear-arrow-o: 1; --clear-arrow-x: 0px; --clear-arrow-y: 0px; --clear-arrow-offset: 4px; --clear-arrow-offset-second: 4px; --clear-line-array: 8.5px; --clear-line-offset: 27px; --clear-long-array: 8.5px; --clear-long-offset: 24px;}.url-input.clearing, .url-input:focus-within{--border-width: 1.5px; --border: var(--border-active);}.url-input.clearing{--close-background: transparent; --clear-arrow-stroke: var(--close-light);}.url-input .icon{position: absolute; left: 15px; top: 15px; pointer-events: none;}.url-input .icon svg,.url-input .icon img{display: block; width: 18px; height: 18px;}.url-input .icon svg{fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--icon);}.url-input .icon svg path{stroke-dasharray: 24px; stroke-dashoffset: var(--icon-offset);}.url-input .icon .favicon{position: absolute; left: 0; top: 0; transform: scale(var(--favicon-scale)) translateZ(0);}.url-input .text{flex-grow: 1;}.url-input .text input{-webkit-appearance: none; line-height: 24px; background: none; border: none; outline: none; display: block; width: 100%; margin: 0; padding: 12px 12px 12px 44px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-color);}.url-input .text input::-moz-placeholder{color: var(--placeholder-color);}.url-input .text input:-ms-input-placeholder{color: var(--placeholder-color);}.url-input .text input::placeholder{color: var(--placeholder-color);}.url-input .clear{-webkit-appearance: none; position: relative; z-index: 1; padding: 0; margin: 12px 12px 12px 0; border: none; outline: none; background: var(--b, transparent); transition: background 0.2s; border-radius: 6px; opacity: var(--clear-opacity); transform: scale(var(--clear-scale)) translateZ(0);}.url-input .clear:before{content: ""; position: absolute; top: 0; bottom: 0; right: 12px; left: var(--clear-swipe-left); background: var(--background); transform-origin: 100% 50%; transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);}.url-input .clear svg{display: block; position: relative; z-index: 1; width: 24px; height: 24px; outline: none; cursor: pointer; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--close); transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);}.url-input .clear svg path{transition: stroke 0.2s;}.url-input .clear svg path.arrow{stroke: var(--clear-arrow-stroke, var(--close)); stroke-dasharray: 4px; stroke-dashoffset: var(--clear-arrow-offset); opacity: var(--clear-arrow-o); transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);}.url-input .clear svg path.arrow:last-child{stroke-dashoffset: var(--clear-arrow-offset-second);}.url-input .clear svg path.line{stroke-dasharray: var(--clear-line-array) 28.5px; stroke-dashoffset: var(--clear-line-offset);}.url-input .clear svg path.long{stroke: var(--clear-arrow-stroke, var(--close)); stroke-dasharray: var(--clear-long-array) 15.5px; stroke-dashoffset: var(--clear-long-offset); opacity: var(--clear-arrow-o); transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);}.url-input .clear:hover{--b: var(--close-background);}
</style>
</head>
<body>
<!-- Modified from https://codepen.io/aaroniker/pen/WNxoovJ -->
<div id="wrapper">
<a href="javascript:;" id="cloner">Make copy</a>
<div class="url-input">
<div class="icon">
<svg viewBox="0 0 18 18">
<path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
<path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
</svg>
<div class="favicon"></div>
</div>
<div class="text">
<input type="text" placeholder="Your URL" />
</div>
<button class="clear">
<svg viewBox="0 0 24 24">
<path class="line" d="M2 2L22 22" />
<path class="long" d="M9 15L20 4" />
<path class="arrow" d="M13 11V7" />
<path class="arrow" d="M17 11H13" />
</svg>
</button>
</div>
</div>
<template id="url-template" style="display:none;">
<div class="url-input"> <div class="icon"> <svg viewBox="0 0 18 18"> <path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001"/> <path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75"/> </svg> <div class="favicon"></div></div><div class="text"> <input type="text" placeholder="Your URL"/> </div><button class="clear"> <svg viewBox="0 0 24 24"> <path class="line" d="M2 2L22 22"/> <path class="long" d="M9 15L20 4"/> <path class="arrow" d="M13 11V7"/> <path class="arrow" d="M17 11H13"/> </svg> </button> </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script>
// From https://codepen.io/aaroniker/pen/WNxoovJ
const { to, set, timeline } = gsap
function validURL(str) {
let pattern = new RegExp('^(https?:\/\/)?'+
'((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+
'((\d{1,3}\.){3}\d{1,3}))'+
'(\:\d+)?(\/[-a-z\d%_.~+]*)*'+
'(\?[;&a-z\d%_.~+=-]*)?'+
'(\#[-a-z\d_]*)?$','i')
return !!pattern.test(str)
}
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
document.querySelectorAll('.url-input').forEach(elem => {
let icon = elem.querySelector('.icon'),
favicon = icon.querySelector('.favicon'),
clear = elem.querySelector('.clear'),
input = elem.querySelector('input'),
{ classList } = elem,
svgLine = clear.querySelector('.line'),
svgLineProxy = new Proxy({
x: null
}, {
set(target, key, value) {
target[key] = value
if(target.x !== null) {
svgLine.setAttribute('d', getPath(target.x, .1925))
}
return true
},
get(target, key) {
return target[key]
}
})
svgLineProxy.x = 0
input.addEventListener('input', delay(e => {
let bool = input.value.length,
valid = validURL(input.value)
to(elem, {
'--clear-scale': bool ? 1 : 0,
duration: bool ? .5 : .15,
ease: bool ? 'elastic.out(1, .7)' : 'none'
})
to(elem, {
'--clear-opacity': bool ? 1 : 0,
duration: .15
})
to(elem, {
'--icon-offset': valid ? '24px' : '0px',
duration: .15,
delay: valid ? 0 : .2
})
if(valid) {
if(favicon.querySelector('img')) {
favicon.querySelector('img').src = 'https://f1.allesedv.com/64/' + input.value
return
}
let img = new Image()
img.onload = () => {
favicon.appendChild(img)
to(elem, {
'--favicon-scale': 1,
duration: .5,
delay: .2,
ease: 'elastic.out(1, .7)'
})
}
img.src = 'https://f1.allesedv.com/64/' + input.value
} else {
if(favicon.querySelector('img')) {
to(elem, {
'--favicon-scale': 0,
duration: .15,
onComplete() {
favicon.querySelector('img').remove()
}
})
}
}
}, 250))
clear.addEventListener('click', e => {
classList.add('clearing')
set(elem, {
'--clear-swipe-left': (input.offsetWidth - 44) * -1 + 'px'
})
to(elem, {
keyframes: [{
'--clear-rotate': '45deg',
duration: .25
}, {
'--clear-arrow-x': '2px',
'--clear-arrow-y': '-2px',
duration: .15
}, {
'--clear-arrow-x': '-3px',
'--clear-arrow-y': '3px',
'--clear-swipe': '-3px',
duration: .15,
onStart() {
to(svgLineProxy, {
x: 3,
duration: .1,
delay: .05
})
}
}, {
'--clear-swipe-x': 1,
'--clear-x': (input.offsetWidth - 32) * -1 + 'px',
duration: .45,
onComplete() {
input.value = ''
input.focus()
if(favicon.querySelector('img')) {
to(elem, {
'--favicon-scale': 0,
duration: .15,
onComplete() {
favicon.querySelector('img').remove()
}
})
to(elem, {
'--icon-offset': '0px',
'--icon-offset-line': '0px',
duration: .15,
delay: .2
})
}
to(elem, {
'--clear-arrow-offset': '4px',
'--clear-arrow-offset-second': '4px',
'--clear-line-array': '8.5px',
'--clear-line-offset': '27px',
'--clear-long-offset': '24px',
'--clear-rotate': '0deg',
'--clear-arrow-o': 1,
duration: 0,
delay: .7,
onStart() {
classList.remove('clearing')
}
})
to(elem, {
'--clear-opacity': 0,
duration: .2,
delay: .55
})
to(elem, {
'--clear-arrow-o': 0,
'--clear-arrow-x': '0px',
'--clear-arrow-y': '0px',
'--clear-swipe': '0px',
duration: .15
})
to(svgLineProxy, {
x: 0,
duration: .45,
ease: 'elastic.out(1, .75)'
})
}
}, {
'--clear-swipe-x': 0,
'--clear-x': '0px',
duration: .4,
delay: .35
}]
})
to(elem, {
'--clear-arrow-offset': '0px',
'--clear-arrow-offset-second': '8px',
'--clear-line-array': '28.5px',
'--clear-line-offset': '57px',
'--clear-long-offset': '17px',
duration: .2
})
})
})
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(x, smoothing) {
return [
[2, 2],
[12 - x, 12 + x],
[22, 22]
].reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '')
}
</script>
<script>
// jQuery 3.5.1 has already been included
$('#cloner').click(function(e){
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
})
</script>
</body>
</html>
document.querySelectorAll只在脚本启动时调用一次，因此每次创建新输入时都必须再次执行。
所以为了避免重写你的代码， 您只需将 querySelectorAll 的初始化封装在一个函数中
function initInput() {
document.querySelectorAll(".url-input").forEach((elem) => {
:
:
to(elem, {
"--clear-arrow-offset": "0px",
"--clear-arrow-offset-second": "8px",
"--clear-line-array": "28.5px",
"--clear-line-offset": "57px",
"--clear-long-offset": "17px",
duration: 0.2,
});
});//end clear.addEventListener
});//end queryselectorAll
}
并且您在脚本开头和克隆器中调用它：
jQuery(function () {
const { to, set, timeline } = gsap;
initInput();
$("#cloner").click(function (e) {
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
initInput();
});
:
:
const { to, set, timeline } = gsap;
initInput();
$("#cloner").click(function (e) {
e.preventDefault();
let $urlTemplate = $("template#url-template").html();
let urlCopy = $($urlTemplate).clone();
$("#wrapper").append(urlCopy);
$(this).blur();
initInput();
});
function validURL(str) {
let pattern = new RegExp(
"^(https?:\/\/)?" +
"((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|" +
"((\d{1,3}\.){3}\d{1,3}))" +
"(\:\d+)?(\/[-a-z\d%_.~+]*)*" +
"(\?[;&a-z\d%_.~+=-]*)?" +
"(\#[-a-z\d_]*)?$",
"i"
);
return !!pattern.test(str);
}
function delay(fn, ms) {
let timer = 0;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(fn.bind(this, ...args), ms || 0);
};
}
function initInput() {
document.querySelectorAll(".url-input").forEach((elem) => {
let icon = elem.querySelector(".icon"),
favicon = icon.querySelector(".favicon"),
clear = elem.querySelector(".clear"),
input = elem.querySelector("input"),
{ classList } = elem,
svgLine = clear.querySelector(".line"),
svgLineProxy = new Proxy(
{
x: null,
},
{
set(target, key, value) {
target[key] = value;
if (target.x !== null) {
svgLine.setAttribute("d", getPath(target.x, 0.1925));
}
return true;
},
get(target, key) {
return target[key];
},
}
);
svgLineProxy.x = 0;
input.addEventListener(
"input",
delay((e) => {
let bool = input.value.length,
valid = validURL(input.value);
to(elem, {
"--clear-scale": bool ? 1 : 0,
duration: bool ? 0.5 : 0.15,
ease: bool ? "elastic.out(1, .7)" : "none",
});
to(elem, {
"--clear-opacity": bool ? 1 : 0,
duration: 0.15,
});
to(elem, {
"--icon-offset": valid ? "24px" : "0px",
duration: 0.15,
delay: valid ? 0 : 0.2,
});
if (valid) {
if (favicon.querySelector("img")) {
favicon.querySelector("img").src =
"https://f1.allesedv.com/64/" + input.value;
return;
}
let img = new Image();
img.onload = () => {
favicon.appendChild(img);
to(elem, {
"--favicon-scale": 1,
duration: 0.5,
delay: 0.2,
ease: "elastic.out(1, .7)",
});
};
img.src = "https://f1.allesedv.com/64/" + input.value;
} else {
if (favicon.querySelector("img")) {
to(elem, {
"--favicon-scale": 0,
duration: 0.15,
onComplete() {
favicon.querySelector("img").remove();
},
});
}
}
}, 250)
);
clear.addEventListener("click", (e) => {
classList.add("clearing");
set(elem, {
"--clear-swipe-left": (input.offsetWidth - 44) * -1 + "px",
});
to(elem, {
keyframes: [
{
"--clear-rotate": "45deg",
duration: 0.25,
},
{
"--clear-arrow-x": "2px",
"--clear-arrow-y": "-2px",
duration: 0.15,
},
{
"--clear-arrow-x": "-3px",
"--clear-arrow-y": "3px",
"--clear-swipe": "-3px",
duration: 0.15,
onStart() {
to(svgLineProxy, {
x: 3,
duration: 0.1,
delay: 0.05,
});
},
},
{
"--clear-swipe-x": 1,
"--clear-x": (input.offsetWidth - 32) * -1 + "px",
duration: 0.45,
onComplete() {
input.value = "";
input.focus();
if (favicon.querySelector("img")) {
to(elem, {
"--favicon-scale": 0,
duration: 0.15,
onComplete() {
favicon.querySelector("img").remove();
},
});
to(elem, {
"--icon-offset": "0px",
"--icon-offset-line": "0px",
duration: 0.15,
delay: 0.2,
});
}
to(elem, {
"--clear-arrow-offset": "4px",
"--clear-arrow-offset-second": "4px",
"--clear-line-array": "8.5px",
"--clear-line-offset": "27px",
"--clear-long-offset": "24px",
"--clear-rotate": "0deg",
"--clear-arrow-o": 1,
duration: 0,
delay: 0.7,
onStart() {
classList.remove("clearing");
},
});
to(elem, {
"--clear-opacity": 0,
duration: 0.2,
delay: 0.55,
});
to(elem, {
"--clear-arrow-o": 0,
"--clear-arrow-x": "0px",
"--clear-arrow-y": "0px",
"--clear-swipe": "0px",
duration: 0.15,
});
to(svgLineProxy, {
x: 0,
duration: 0.45,
ease: "elastic.out(1, .75)",
});
},
},
{
"--clear-swipe-x": 0,
"--clear-x": "0px",
duration: 0.4,
delay: 0.35,
},
],
});
to(elem, {
"--clear-arrow-offset": "0px",
"--clear-arrow-offset-second": "8px",
"--clear-line-array": "28.5px",
"--clear-line-offset": "57px",
"--clear-long-offset": "17px",
duration: 0.2,
});
});
});
}
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(
Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)
),
angle: Math.atan2(n[1] - p[1], n[0] - p[0]),
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [
current[0] + Math.cos(angle) * length,
current[1] + Math.sin(angle) * length,
];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(x, smoothing) {
return [
[2, 2],
[12 - x, 12 + x],
[22, 22],
].reduce(
(acc, point, i, a) =>
i === 0
? `M ${point[0]},${point[1]}`
: `${acc} ${getPoint(point, i, a, smoothing)}`,
""
);
}
.url-input {
--background: #fff;
--border-default: #E1E6F9;
--border-active: #275EFE;
--text-color: #646B8C;
--placeholder-color: #BBC1E1;
--icon: #275EFE;
--close: #646B8C;
--close-light: #A6ACCD;
--close-background: #EFF2FB;
width: 100%;
max-width: 240px;
display: flex;
align-items: center;
position: relative;
border-radius: 8px;
background: var(--background);
box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
transition: box-shadow 0.2s;
--favicon-scale: 0;
--icon-offset: 0px;
--clear-x: 0px;
--clear-swipe-left: 0px;
--clear-swipe-x: 0;
--clear-swipe: 0px;
--clear-scale: 0;
--clear-rotate: 0deg;
--clear-opacity: 0;
--clear-arrow-o: 1;
--clear-arrow-x: 0px;
--clear-arrow-y: 0px;
--clear-arrow-offset: 4px;
--clear-arrow-offset-second: 4px;
--clear-line-array: 8.5px;
--clear-line-offset: 27px;
--clear-long-array: 8.5px;
--clear-long-offset: 24px;
}
.url-input.clearing, .url-input:focus-within {
--border-width: 1.5px;
--border: var(--border-active);
}
.url-input.clearing {
--close-background: transparent;
--clear-arrow-stroke: var(--close-light);
}
.url-input .icon {
position: absolute;
left: 15px;
top: 15px;
pointer-events: none;
}
.url-input .icon svg, .url-input .icon img {
display: block;
width: 18px;
height: 18px;
}
.url-input .icon svg {
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--icon);
}
.url-input .icon svg path {
stroke-dasharray: 24px;
stroke-dashoffset: var(--icon-offset);
}
.url-input .icon .favicon {
position: absolute;
left: 0;
top: 0;
transform: scale(var(--favicon-scale)) translateZ(0);
}
.url-input .text {
flex-grow: 1;
}
.url-input .text input {
-webkit-appearance: none;
line-height: 24px;
background: none;
border: none;
outline: none;
display: block;
width: 100%;
margin: 0;
padding: 12px 12px 12px 44px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
}
.url-input .text input::-moz-placeholder {
color: var(--placeholder-color);
}
.url-input .text input:-ms-input-placeholder {
color: var(--placeholder-color);
}
.url-input .text input::placeholder {
color: var(--placeholder-color);
}
.url-input .clear {
-webkit-appearance: none;
position: relative;
z-index: 1;
padding: 0;
margin: 12px 12px 12px 0;
border: none;
outline: none;
background: var(--b, transparent);
transition: background 0.2s;
border-radius: 6px;
opacity: var(--clear-opacity);
transform: scale(var(--clear-scale)) translateZ(0);
}
.url-input .clear:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 12px;
left: var(--clear-swipe-left);
background: var(--background);
transform-origin: 100% 50%;
transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
}
.url-input .clear svg {
display: block;
position: relative;
z-index: 1;
width: 24px;
height: 24px;
outline: none;
cursor: pointer;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--close);
transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);
}
.url-input .clear svg path {
transition: stroke 0.2s;
}
.url-input .clear svg path.arrow {
stroke: var(--clear-arrow-stroke, var(--close));
stroke-dasharray: 4px;
stroke-dashoffset: var(--clear-arrow-offset);
opacity: var(--clear-arrow-o);
transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.url-input .clear svg path.arrow:last-child {
stroke-dashoffset: var(--clear-arrow-offset-second);
}
.url-input .clear svg path.line {
stroke-dasharray: var(--clear-line-array) 28.5px;
stroke-dashoffset: var(--clear-line-offset);
}
.url-input .clear svg path.long {
stroke: var(--clear-arrow-stroke, var(--close));
stroke-dasharray: var(--clear-long-array) 15.5px;
stroke-dashoffset: var(--clear-long-offset);
opacity: var(--clear-arrow-o);
transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
}
.url-input .clear:hover {
--b: var(--close-background);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<a href="javascript:;" id="cloner">Make copy</a>
<div class="url-input">
<div class="icon">
<svg viewBox="0 0 18 18">
<path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
<path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
</svg>
<div class="favicon"></div>
</div>
<div class="text">
<input type="text" placeholder="Your URL" />
</div>
<button class="clear">
<svg viewBox="0 0 24 24">
<path class="line" d="M2 2L22 22" />
<path class="long" d="M9 15L20 4" />
<path class="arrow" d="M13 11V7" />
<path class="arrow" d="M17 11H13" />
</svg>
</button>
</div>
</div>
<!-- <template id="url-template" style="display:none;"> -->
<template id="url-template" style="display:none;">
<div class="url-input"> <div class="icon"> <svg viewBox="0 0 18 18"> <path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001"/> <path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75"/> </svg> <div class="favicon"></div></div><div class="text"> <input type="text" placeholder="Your URL"/> </div><button class="clear"> <svg viewBox="0 0 24 24"> <path class="line" d="M2 2L22 22"/> <path class="long" d="M9 15L20 4"/> <path class="arrow" d="M13 11V7"/> <path class="arrow" d="M17 11H13"/> </svg> </button> </div>
</template>