Блог

Главная - Вопросы по программированию - Изменение цвета текста при событии фокусировки или при вводе пользователем чего-либо

Изменение цвета текста при событии фокусировки или при вводе пользователем чего-либо

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть форма, в которой текстовое поле уже имеет некоторое значение, которое изменяется, когда какой-либо пользователь нажимает внутри текстового поля.Цвет шрифта слегка изменен на светлый. Поэтому, когда пользователь что-то вводит, цвет шрифта должен меняться на темный и должен оставаться темным. Есть ли какой-либо Java-скрипт для этого. 

 <html>
<head>
<style type="text/css">
.formWrapper input[type="text"]{float:left; width:178px; height:28px; line-height:27px; padding-left:5px; color:#CACACA; font-size:13px; font-weight:bold;}
</style>
</head>
<body>
<div class="formWrapper">
<form name=form>
<Input type="text" name="name1"  value="Eg : Flat-27,Block 4,Skyline" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" size="30">
</form>
</div>
</body>

Ответ №1:

В моем примере:

  • при фокусировке текст по умолчанию будет очищен, а элемент ввода получит зеленый цвет
  • при размытии, если на вводе нет текста, он заполняется серым текстом по умолчанию

код:

 $('input').focus(function(){
     if($(this).val() == this.defaultValue){$(this).val('');$(this).css("color","green");}
}).blur(function(){
     if($(this).val() == ''){$(this).val(this.defaultValue);$(this).css("color","grey");}
});

HTML:

 <div class="formWrapper">
<form name=form>
<Input type="text" name="name1"  value="Eg : Flat-27,Block 4,Skyline" size="30">
</form>
</div>

Живая демонстрация

Комментарии:

1. Да, вам нужна библиотека jQuery. Вы отметили свой вопрос тегом jQuery.

2. Не могли бы вы помочь мне, как использовать библиотеку Jquery .. ваша программа не работает на моем локальном хостинге ..пожалуйста, помогите

3. вам нужно включить это. Просто поместите следующую строку в свой <head>… </head> блок: <script type=»text/javascript» src=» code.jquery.com/jquery-1.6.2.js»></script<>>

4. Безуспешно, можете ли вы опубликовать полную программу в качестве другого ответа!!

5. пожалуйста, опубликуйте эту программу на SO

Ответ №2:

 $("element").keydown(function() {
  this.value= "";
  $(this).css("color",darkcolorCode);
}).blur(function(){
    if( this.value == "default text" || $.trim(this.value) == "" ) {
       this.value == "default text";
        $(this).css("color",lightcolorCode);
    }
});