0

我想创建一个使用jquery ui datepicker的表单。
一切都很完美,只不过因为我改变了输入字段的设计,所以在选取日期时不会删除占位符属性。

这里是小提琴:https://jsfiddle.net/deqguphb/

HTML
Jquery UI日期选择器不重点输入

<form> 
    <ol> 
     <li> 
      <input id="input1" name="input1" value="" placeholder="Input1: Working just fine"/> 
      <label for="input1">Input1</label> 
     </li> 
     <li> 
      <input id="input2" name="input2" value="" placeholder="Input2: The placeholder stays" /> 
      <label for="input2">Input2</label> 
     </li> 
     <li> 
      <input id="input3" name="input2" value="" placeholder="Input3: The placeholder stays" /> 
      <label for="input3">Input3</label> 
     </li> 
    </ol> 
</form> 

的Javascript

/* The focus effect */ 
$("input:not([value]),input[value='']").addClass('empty'); 

/* Input event handling */ 
$('input').on('input keyup', function() { 
     $(this).toggleClass('empty', !Boolean($(this).val())); 
}); 

我不知道是什么事件的日期拾取后触发。我尝试了onKeyup和onChange,但这并没有解决问题。

我会为此感到高兴的解决方案。

回答

0

我已经更新了你的小提琴,

我已经添加了两个事件给你的文本框的占位符的每一个。

onfocus="this.placeholder = ''" onblur="this.placeholder = 'Input1: Working just fine'" 

小提琴是:https://jsfiddle.net/deqguphb/4/

您需要使用重点和文本模糊事件。

希望这会帮助你:)

+0

谢谢你的回答!不幸的是,我没有解决问题。挑选日期后,标签仍然在日期的下方。 – Schwesi 2015-03-31 09:30:09