Задать вопрос
NiceIce
@NiceIce
lamer
javascript

Как сделать кнопку при нажатти на которую отправлялся бы текст в строку ввода?

Есть кнопка:
$('body').append('<input type="button" name="btn" accesskey="q" accesskey="й" value="Н" id="btn" style="border-width: 0px; background: url(images/opacity.png);">')
  $("#btn").css("position", "absolute").css("top", 539).css("left", 350).css({ color: "red" });

И строка ввода:
$('body').append('<input type="text" name="img" id="img1" size="1" accesskey="w" placeholder="к.1" accesskey="a" style="border-width: 0px; background: url(images/opacity.png);" >')                     
  $("#img1").css("position", "absolute").css("top", 539).css("left", 400).css({ color: "red" });

Текст который нужно отправить в строку ввода:
<p>
	<style type="text/css">
.all p {
font-family:trebuchet ms,helvetica,sans-serif !important;
color: #444 !important;
font-size: 16px;
}

hr {
border: 0px !important;
height: 2px !important;
background-color: #888 !important;
}

p.big img {
object-fit: contain !important;
width: 890px !important;
height: 200px !important;
overflow:hidden !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 50px !important;
margin-top: 50px !important;
}

.strong {
color: rgb(0,0,0) !important;
font-size: 18px !important;
}

.alt {
font-style: oblique !important;
text-align: right !important;
font-size: 18px !important;
font-family: 'Times New Roman' !important;
}

.pri {
color: rgb(0,0,0) !important;
font-size: 36px !important;
text-transform: uppercase !important;
text-align: center !important;
margin-bottom: 10px !important;
margin-top: 40px !important;
}

.sec {
font-size: 28px !important;
text-transform: uppercase !important;
text-align: center !important;
margin-bottom: 6px !important;
margin-top: 40px !important;
}

.order {
color: #f11 !important;
font-size: 24px !important;
font-family:trebuchet ms,helvetica,sans-serif !important;
text-decoration: underline !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 30px !important;
}

.all a {
color: blue !important;
text-decoration: underline !important;
}


.order a {
color: red !important;
}

.all table tbody tr td {
vertical-align: top !important;
}

.med {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 40px !important;

}

.med img {

object-fit: cover !important;
width: 250px !important;
height: 245px !important;
overflow:hidden !important;
display: block !important;
margin-left: 15px !important;
margin-right: 15px !important;
margin-bottom: 0px !important;
margin-top: 14px !important;
vertical-align: top !important;
}

.med p {
text-align: center !important; 
font-size:18px !important;
margin-left: 15px !important;
margin-right: 15px !important;
margin-bottom: 14px !important;
margin-top: 7px !important;
width: 250px !important;
}




.small {
width: 100% !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}

.small img {
object-fit: contain;
width: 195px !important;
height: 130px !important;
overflow:hidden;
display: block;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 15px;
vertical-align: top;
border-width: 2px;
border-style: solid;
border-color: black;

}

.small p {
text-align: center !important; 
font-size:16px !important;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 10px;
margin-top: 5px;
width: 195px;
font-family:trebuchet ms,helvetica,sans-serif;
color: #444;

}



div.side {
margin-bottom: 30px !important;
margin-top: 30px !important;
}

.side {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 30px !important;
}

.side img {
float: left !important;
object-fit: cover !important;
width: 300px !important;
height: 190px !important;
overflow:hidden !important;
display: block !important;
margin-left: 16px !important;
margin-right: 20px !important;
margin-bottom: 10px !important;
margin-top: 0px !important;
vertical-align: top !important;
}

.side p {
margin-bottom: 10px !important;
margin-top: 0px !important;
max-width: 500px;
}	</style>
</p>
<div class="all">

Подскажите как сделать чтобы при нажатти на кнопку name="btn" текст отправлялся в строку ввода name="img" ?
  • Вопрос задан
  • 272 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Примерно так на jQuery: jsfiddle.net/IonDen/vv0uz8vc
var $btn = $('#testBtn'),
    $input = $('[name="test"]');

$btn.on('click', function () {
    var text = $(this).data('text');
    $input.prop('value', text);
});
Ответ написан
14 комментариев
14 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка смарт контрактов Web 3.0
10 мая 2024, в 15:43
100000 руб./за проект
Десктопное приложение для алготрейдинга в сфере криптовалют
04 мая 2024, в 09:38
120000 руб./за проект
Поиск инфлюенсеров в сфере туризма
10 мая 2024, в 14:59
2000 руб./за проект
Ещё заказы