Question

    //Set default values
 $('#name').val('First Last');
 $('#email').val('you@email.com');
 $('#subject').val('Subject');
 $('#message').val('Message');
    //Change style when user types
 $('#name,#email,#subject,#message').keypress(function() {
  $(this).css({
   'color':'black',
   'font-style':'normal'
   });
 });
    //Check each input for change
 $('#name').focusin(function(){
  if($(this).val() == 'First Last') {
   $(this).val('');
  }
 });
 $('#name').focusout(function() {
  if($(this).val() == '') {
   $(this).val('First Last');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#email').focusin(function(){
  if($(this).val() == 'you@email.com') {
   $(this).val('');
  }
 });
 $('#email').focusout(function() {
  if($(this).val() == '') {
   $(this).val('you@email.com');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#subject').focusin(function(){
  if($(this).val() == 'Subject') {
   $(this).val('');
  }
 });
 $('#subject').focusout(function() {
  if($(this).val() == '') {
   $(this).val('Subject');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#message').focusin(function(){
  if($(this).val() == 'Message') {
   $(this).val('');
  }
 });
 $('#message').focusout(function() {
  if($(this).val() == '') {
   $(this).val('Message');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });

Answer 1

有很多插件可以处理这种样式的现场标签。

In Field Labels - 我写了这个，它使用定位将标签移到（或在z-index下）输入区域。它具有额外的好处，即使在场焦点之后也不会完全消失。它只在用户开始输入时完全隐藏。
Labelify - 从未使用它，但它遵循您交换实际文本值的方法。

Answer 2

我建议使用“Jquery Form Plugin”：http://jquery.malsup.com/form/#ajaxSubmit

祝你好运！

jQuery - 我需要一种更有效的方式来编写表单

2 个答案: