Форум

galart · #1 (**permalink**) 22.03.2011, 08:15

Здравствуйте.
Небольшая задача. Есть поле input в которое вводиться какое либо слово, есть select c двумя option в value которых записаны 2 цвета. Требуется чтобы при изменении значения select, значение в input обертывалось span со стилем заданным в выбранном option.

$(function(){
        $('#options').change(function(){
	     curtext = $('#textfield').val();
	     curcolor = $('#options :selected').val();
	     result = '<span style="color:' + curcolor + '">' + curtext '</span>';
	     $('#textfield').val(result);
	})
})

<input style="width:600px" id="textfield" type="text" value="слово"/> 
		<select id="options">
			<option value="#000">Черный</option>
			<option value="#fff">Белый</option>
		</select>

Проблема в том что при первом выборе, когда введенное слово ещё не обрамлено в span все нормально, но если изменить select 2 и более раз скрипт начинает сохранять в переменную слово которое уже находиться в span и собственно уже это результат кладёт между новым тегом span.
Собственно вопрос в том, как сделать так чтобы при каждом срабатывании в span вставлялось только введенное слово.

walik · #2 (**permalink**) 22.03.2011, 08:31

Так а зачем span если можно просто полю css свойства менять ?

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function(){
        $('#options').change(function(){
         curcolor = $('#options :selected').val();
		 $('#textfield').css('color', curcolor);
    })
});
</script>
</head>
<body>
<input style="width:600px" id="textfield" type="text" value="слово"/>
<select id="options">
    <option value="#000">Черный</option>
    <option value="#fff">Белый</option>
    <option value="red">Красный</option>
</select>
</body>
</html>

galart · #3 (**permalink**) 22.03.2011, 14:24

Дело в том что после выбора данные будут отправлены на сервер, и текст будет отображен поверх какой либо картинки (разный цвет для контраста). Как я понимаю данные о цвете поля на сервер не передаются.

Deff · #4 (**permalink**) 13.06.2012, 18:10

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<input style="width:400px" id="textfield" type="text" value="слово"/> 

		<select id="options">
			<option value="#000">Черный</option>
			<option value="#fff">Белый</option>
		</select>


<script type="text/javascript">
var noFirst=false;
$(function(){
        $('#options').change(function(){
	     var curtext = $('#textfield').val();
          if(noFirst){
	       curtext = curtext.replace(/<span[^>]*>([^<]*)\<\/span>/img,"$1")
	     } noFirst=true;
	     var curcolor = $(this).val();
	     var result = '<span style="color:' + curcolor + '">' + curtext + '</span>';
	     $('#textfield').val(result);
	})
})
</script>

Globus · #5 (**permalink**) 30.01.2015, 19:39

А как сделать, чтобы в инпут выводился не код с цветом и не цветное слово, а именно название цвета?
Т.е. выбрали в селекте Чёрный и в инпуте value стало = Чёрный

Понял:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script> 

<script type="text/javascript"> 
$(window).load(function(){
$(".selector").change(function() {
    var $value = $(this).val();
    var $title = $(this).children('option[value='+$value+']').html();
    $('input#colorr').val($title);
}); 
}); 
</script>

 
   <select class="selector">
    <option value="1000000">Белый</option>
    <option value="2000000">Красный</option>
    <option value="3000000">Чёрный</option>
</select>

    
<input id="colorr" class="colorr" value="" name="testinput"">

Форум

Справочник

Discord чат

Курсы javascript