我正在尝试编写一个小函数,它可以“伪造”HTML5 placeholder
属性的行为。我知道已经有插件可以做到这一点,但我想自己编写,因为我真的想在jQuery上做得更好。
到目前为止,这是我认为应该发生的事情。如果你发现任何不必要的东西,请告诉我。
input[type="submit"]
和<button>
。#myInputID => initial value
。在代码中看起来像这样:
function placeholder( element ) {
var values = [];
console.log( values );
$( element ).find( ":input" ).each( function() {
var $this = $( this );
// adding CSS class
$this.addClass( "light" );
if( $this.val() ){
// adding value to array
// the key is missing, maybe add an id to the elements?
values.push( $this.val() );
}
$this.focus( function(){
// remove CSS class
$this.removeClass( "light" );
// if value is in array
var i = $.inArray( $this.val() , values );
if( i != -1 ) {
$this.val( "" );
}
})// focus
$this.blur(function(){
// setting value to inital value if needed
// add CSS class
var i = $.inArray( $this.val() , values );
if( i == -1 ) {
$this.val( "initalValue" );
$this.addClass( "light" );
}
})// blur
}) // each
} // function
placeholder( "form" );
当然它没有完成,但仍有几个问题(它甚至没有工作......),但我不能自己解决。这些是我的主要问题:
$this.val()
是个好主意。什么是最好的地方?这是一个快速测试小提琴:Fiddle
答案 0 :(得分:1)
要保存键值对,请使用您可以像关联数组一样访问的对象。键应该是包含值的输入字段的唯一内容(可能是其ID)。所以从你的下面的例子中得到....
if( $this.val() ){
// adding value to array
values[$this.attr('id')] = $this.val();
}
此时检索任何值变得简单:只使用元素的ID。您还可以删除搜索整个值数组以查找现在可以按ID搜索的值的任何需要。因此,那里的表现也会得到改善。
答案 1 :(得分:1)
它并不像你制作它那么复杂......
<强>的jQuery 强>:
$('#myform').
on('focus', '.autoclear', function () {
if (this.value === this.defaultValue) {
this.value = '';
}
$(this).removeClass('blur').addClass('focus');
}).
on('blur', '.autoclear', function () {
if (this.value === '') {
this.value = this.defaultValue;
}
$(this).removeClass('focus').addClass('blur');
});
<强> HTML 强>:
工作演示:http://jsfiddle.net/L2pfW/
<input type="text" name="field" value="name" class="autoclear" />