HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Как при клике на текст вывести его в value input-а

Рассмотрим способ, как можно при клике на текст занести его в параметр value, например как это сделано у Яндекса (Например, «запрос…»).

Для этого нам понадобится jquery и маленький скриптик. Смотрите код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заносим текст в валуе инпута на клик по этому тексту</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	#exampletext b{cursor:pointer;color:#06F;border-bottom:1px dotted #06F;}
</style>
</head>
<body>
<form action="#">
	<input type="text" id="inptext" value="поиск" size="50" />
	<input type="button" value="Найти" />
	<br />
	<div id="exampletext" >Например, <b>Рубин &mdash; Барселона видео</b></div>
 
	<script type="text/javascript">
		$('#exampletext').click(function(){
		$('#inptext').val($(this).find('b').text());
		});
	</script>
</form>
 
</body>
</html>

Скачать пример

P.S. Так и не понял почему, если скрипт сделать в шапку, а не после инпутов, то он не работает.

Метки: ,

Запись опубликована 02.04.2010 в 16:27 и размещена в рубрике java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (2) на “Как при клике на текст вывести его в value input-а”

  • alexpts:
    04.05.2010 в 17:19

    А не работает у тебя в шапке скорее всего из-за того, что ты не дожидаешься загрузки DOM, т.е. когда выполняется скрипт у тебя нет еще в DOM инпута.

  • barmaglotster:
    27.10.2010 в 18:08

    Чтобы скрипт поместить в шапку надо сделать так:
    $(document.ready(function() {
    $(‘#exampletext’).click(function(){
    $(‘#inptext’).val($(this).find(‘b’).text());
    });
    });

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос