JavaScript; Копировать текст в начало поля ввода при нажатии на него
У меня такой код:
<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">
Что мне нужно сделать: если я щелкну строку, class = "name" которой "копирует" текст в ней, и вставляю ее в начало value = "".
Средства:
При нажатии на <span class = "name">Sabrina</span>
менять
This is a test! в поле ввода
к
SabrinaThis is a test!
У тебя есть идеи, как это сделать? Могу ли я использовать JavaScript или мне нужен jQuery?
весь этот вопрос слишком широк. Stackoverflow не является бесплатным сервисом написания кода или учебным сервисом "как"
вам не нужен jQuery, все, что делает jQuery (хотя он делает это довольно хорошо, IMHO), предоставляет несколько более удобные способы делать то, что вы уже можете делать в JavaScript. Это просто библиотека JavaScript. Следовательно, он не может делать то, что вы еще не можете сделать в JavaScript. Иногда это упрощает или сокращает работу, вот и все.
я согласен с @charlietfl. это действительно просто с javascript и / или jquery. вам просто нужно знать некоторые основы для этого!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Если вы думаете о решении jQuery, вы можете попробовать следующее:
var text = $('#input').val();
$('.name').click(function(){
$('#input').val($(this).text() + ' ' + text);
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">Если вам нравится Vanilla JS:
var text = document.getElementById('input').value;
document.querySelectorAll('.name').forEach(function(span){
span.addEventListener('click', function(){
document.getElementById('input').value = this.textContent + ' ' + text;
});
});<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">это в значительной степени противоположное тому, о чем просили. Идея заключалась в том, чтобы взять текст из диапазона и добавить его к существующему тексту в текстовом поле, а не добавлять текст в диапазон.
Без проблем. Теперь это лучшее решение, потому что оно сбрасывает значение каждый раз, а не бесконечно добавляет дополнительные значения, как большинство других ответов.
Попробуй это.
$(document).ready(function(){
var initialVal = $("input").val();
$("span.name").click(function(){
$("input").val($(this).text() + initialVal);
});
});<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">
</body>
</html>Зачем указывать span в селекторе? И если на странице есть больше входов, этот код изменит их!
Используйте следующий код:
$(document).ready(function() {
var $input = $('#input');
$('.name').click(function() {
$input.val($(this).text() + $input.val());
});
});<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Редактировать:
Or by vanilla JS (without any libraries):window.addEventListener('load', function() {
var input = document.getElementById('input');
document.querySelectorAll('.name').forEach(function(elem) {
elem.addEventListener('click', function() {
input.value = this.textContent + input.value;
});
});
});<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Для этого вы можете использовать параметр функции функции .val():
Таким образом, вы можете получить текущее значение поля ввода и связать его с текстом выбранного диапазона
$('.name').on('click', function() {
var text = $(this).text();
$('#input').val(function(index, value) {
return text + value;
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">Кто-нибудь хочет уточнить, что не так с этим решением?
с jQuery:
$('.name').on("click", function() {
var name = $(this).text();
$("#input").val(name + " " + $("#input").val());
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class = "name">test</span>
<input type = "text" value = "This is a test!" name = "message" id = "input">Do you have an idea how to do it? Can I use JavaScript or do I need jQuery?
Я предполагаю, что вы спросили об этом, потому что в первую очередь хотите этого с помощью простого JavaScript.
Вот как это сделать без JQuery:
document.querySelectorAll('.name').forEach(function(elem){
elem.addEventListener('click', function(){
document.querySelector('#input').value = this.innerText + document.querySelector('#input').value;
});
});<span class = "name">Peter</span><br>
<span class = "name">Harald</span><br>
<span class = "name">George</span><br>
<span class = "name">Sabrina</span><br>
<input type = "text" value = "This is a test!" name = "message" id = "input">
Могу сделать это в любом случае. Разбейте это на различные части ... как создать событие и получить событие элемента, которое произошло в обработчике ... как получить его текст ... и как изменить значение конкретного ввода. Затем исследуйте каждую часть, чтобы получить код для начала.