0

ユーザーが入力/テキストエリアにテキストを入力したときのラベルフェードに取り組んでいます。これまでのところうまく機能していますが、入力/テキストエリアが読み込まれたときに既存の値があるかどうかを確認する良い方法がわからないため、ラベルを自動的に非表示にすることができます。

input / textareasは.load（）を使用してロードされているため、セレクターを直接定義する代わりに$（document）を使用しています。

これは、Imが克服しようとしている問題を示す例です。どんな助けでも大歓迎です。また、この機能をプラグイン/関数にラップする方法について何か提案があれば、さらに役立ちます。ありがとう！

http://jsfiddle.net/skyros/FTXc3/

jsfiddleに行きたくない場合は擬似コード

//JQUERY
$(document).on('click', 'label', function() {
  $(this).next().focus();
});

$(document).on('focus', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('blur', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 1) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('keypress', 'input, textarea', function() {
  var label = $(this).prev('label').hide();
});​
4

2 に答える 2

1

1つの方法は、フィルター関数を使用して長さが0より大きい要素を取得し、ラベルを非表示にすることです。

$(function(){ // on dom ready
    $('label').filter(function(){
        // return labels that have siblings with input val > 0
        return $.trim($(this).siblings('input[type=text]').val()).length > 0;
    }).hide(); // hide those labels that are returned 
    // or do whatever you want to do with those labels here
});

http://jsfiddle.net/wirey00/XwGa6/

于 2012-10-19T16:39:16.860 に答える
0

私なら、変えるね：

$(document).on('focus', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :     $(this).prev('label').fadeTo(100, 0).hide();
});

に

function input_textarea_focussed() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) :     $(this).prev('label').fadeTo(100, 0).hide();
};
$(document).on('focus', 'input,textarea', input_textarea_focussed());

次に追加します

$(document).on('load', function() {
  $("input, textarea").each(input_textarea_focussed);
});
于 2012-10-19T16:38:57.423 に答える