Блог

Что я хочу сделать, так это использовать функции JS для дополнительных полей ввода в форме. Например, я хочу иметь LastName и LastNameLabel и т.д. Я надеюсь, что смогу каким-то образом настроить функции, чтобы найти пары Aaa и AaaLabel, чтобы каждое поле могло иметь одинаковый эффект. Мой код приведен ниже. Спасибо!

Обновление: Сейчас я просто пытаюсь получить «исходное значение», чтобы отобразить имя идентификатора элемента с пробелом между строчной буквой, за которой следует заглавная буква. Например, если идентификатор элемента — LastName, я хочу, чтобы innerHTML был «Last Name». Спасибо за всю вашу помощь!!

 <script type="text/javascript">
  function LabelOnClick(el) { var associatedFieldId = el.getAttribute('for');
                              if (associatedFieldId)
                                 document.getElementById(associatedFieldId).focus();
                            }
  function FieldOnFocus(el) { document.getElementById(el.id   'Label').className='FieldFocus';
                            }
  function FieldOnKeyPress(el) { if (event.keyCode!=9 amp;amp; event.keyCode!=8) { document.getElementById(el.id   'Label').innerHTML='';
                                                                           }
                               }
  function FieldOnKeyDown(el) { el.style.width = Math.max(30,el.value.length*10) 'px';
                            }

  function FieldOnKeyUp(el) { el.value=el.value.substring(0,1).toUpperCase() el.value.substring(1,el.value.length);
                              if (el.value=='') document.getElementById(el.id   'Label').innerHTML='Original Value';

                            }
  function FieldOnBlur(el) { if (el.value=='') { document.getElementById(el.id   'Label').className='FieldBlur';
                                                 document.getElementById(el.id   'Label').innerHTML='Original Value';
                                               }
                           }
</script>

<style>
  .InputField { border: 1px dotted lightgray;
                border-bottom:1px solid black;
                min-width: 30px;
                padding: 5px;
                font-family:tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldBlur { color: gray;
               position: absolute;
               padding: 6px;
               padding-left: 8px;
               padding-top: 8px;
               font-family: tahoma, arial, sans-serif;
               font-size: 14px;
  }
  .FieldFocus { color: lightgray;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldInput { color: black;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
</style>
  

 <label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name
</label>

<input id="FirstName" class="InputField" type="text" name="FirstName" maxlength="25"
       onfocus="FieldOnFocus(this)"
       onkeypress="FieldOnKeyPress(this)"
       onkeydown="FieldOnKeyDown(this)"
       onkeyup="FieldOnKeyUp(this)"
       onblur="FieldOnBlur(this)"/>

</body>
  

Хорошо, игнорируя тот факт, что в наши дни к встроенным обработчикам событий обычно относятся неодобрительно, попробуйте что-то вроде следующего, в котором onclick и onfocus в вашем HTML проходят this через связанные функции таким образом, чтобы эти функции имели ссылку на элемент, на котором было запущено событие, чтобы они могли выяснить, что такое связанное поле или метка:

 <script>

function LabelOnClick(el) {
   var associatedFieldId = el.getAttribute("for");
   if (associatedFieldId)
      document.getElementById(associatedFieldId).focus();
}

function FieldOnFocus(el) {
   document.getElementById(el.id   "Label").className='FieldFocus';
}

</script>

<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name  </label>

<input id="FirstName" ... onfocus="FieldOnFocus(this)" ... />
  

Я оставлю делать что-то подобное для других событий в качестве упражнения для читателя…

ОТРЕДАКТИРУЙТЕ, чтобы соответствовать вашему обновленному вопросу:

Если это:

 document.getElementById(el.id   'Label').innerHTML='Original Value'; 
  

та часть, о которой вы говорите, где вы хотите заменить 'Original Value' идентификатор элемента с добавлением пробелов, тогда в этот момент el.id содержит «LastName», поэтому, если вы используете регулярное выражение, как в следующей строке, вы должны получить «Last Name»:

 document.getElementById(el.id   'Label').innerHTML
                      = el.id.replace(/([^A-Z])([A-Z])/g, "$1 $2");