Получить подстроку из URL-адреса и скопировать в буфер обмена?CSS

Разбираемся в CSS
Ответить
Anonymous
 Получить подстроку из URL-адреса и скопировать в буфер обмена?

Сообщение Anonymous »

Я пытаюсь кое-что сделать для своего школьного проекта и надеюсь, что вы мне в этом поможете.
Я хочу скопировать подстроку из URL-адреса, например
Url = https://www.example.com/blah/blah&code=12432 где
substring = 12432.
Также я хочу напечатать подстроку в поле копирования.
Пожалуйста, помогите мне с этой проблемой. Моему проекту необходимо скопировать текст из строки.
(function() {
var copyButton = document.querySelector('.copy button');
var copyInput = document.querySelector('.copy input');
copyButton.addEventListener('click', function(e) {
e.preventDefault();
var text = copyInput.select();
document.execCommand('copy');
});

copyInput.addEventListener('click', function() {
this.select();
});
})();

html, body {
height: 100%;
}

body {
font-size: 16px;
background: #FFD1DD;
display: flex;
align-items: center;
justify-content: center;
}

* {
box-sizing: border-box;
}

.wrapper {
padding: 0 5px;
}

h1 {
text-align: center;
font-size: 40px;
margin-bottom: 1.2em;
text-decoration: underline;
text-transform: uppercase;
}

p {
font-family: 'VT323', monospace;
font-size: 20px;
}

.container {
display: flex;
background: #FFA3BB;
border-radius: 7px;
padding: 10px;
margin: 0 auto;
}

h3 {
font-size: 28px;
text-transform: uppercase;
text-align: center;

span {
display: inline-block;
position: relative;
}
}

.copy, .paste {
flex-grow: 1;
width: 50%;
}

.copy {
border-right: 2px solid;
padding-right: 10px;

h3 {
span {
background: #76ECFF;
}
}

input {
padding-right: 90px;
}
}

.paste {
padding-left: 10px;

h3 {
span {
background: #FAE916;
}
}
}

form {
position: relative;
width: 100%;

input {
display: block;
width: 100%;
border: 3px solid;
outline: 0;
background: #FFF;
font-size: 25px;
padding: 5px 4px;
margin-bottom: 20px;
}

button {
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: 0;
outline: 0;
color: #FFF;
background: #000;
font-family: 'VT323', monospace;
font-size: 25px;
text-transform: uppercase;
padding: 0.08em 0.8em;
cursor: pointer;
}
}

Link Copy

Select the link text by clicking within the input then copy yourself or just click the copy button. Paste into the paste side to see that it works!


Copy


Copy


Paste









Подробнее здесь: https://stackoverflow.com/questions/732 ... -clipboard
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»