1

保存ボタンを使用しないフォームを作成しています。フォームは、入力テキストボックスとテキストエリアで構成されています。ユーザーが入力フィールドにデータを入力した後、onBlur関数をトリガーし、ユーザーが入力した情報を含むスパンに入力を変更したいと思います。

また、この情報を編集できるようにしたいので、ユーザーがテキストで新しく作成されたスパンをクリックすると、編集を楽しむために現在の情報が入力フィールドに戻ります。

参考までに、Flickrで写真のタイトルを編集するのとほとんど同じような機能を探しています。

可能であれば、サーバーとのやり取りを反映するために、ぼかし後0.5秒間テキストボックスに「保存中...」と表示させたいと思います。

4

3 に答える 3

1

入力用のCSSスタイルを:focus作成してテキストボックスのように見せ、それ以外の場合はインラインテキスト要素のように見せるためのCSSスタイルを作成してみませんか？

input.ez-edit {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-style: none;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
}

input.ez-edit:focus {
    display: inline-block;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

input.ez-edit:focus:hover {
    text-decoration: none;
}
于 2010-03-10T00:16:11.003 に答える
1

@stragerの提案に基づいてこれを試して、次の優れた機能のコード

jQueryを作成しました。

$(":text[value='']").addClass('empty');
            $(":text[value>='']").removeClass('empty');
            $('.ez-edit').blur(function() {
                if ($(this).val().length >= 0) {
                    $(this).removeClass('empty');
                 } 
                 if ($(this).val().length <= 0) {
                    $(this).addClass('empty');
                 }
            });

およびCSS：

 input.ez-edit {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
    font-weight:bold;
    display: inline;
    padding:5px 8px 5px 2px;
    background-color: transparent;
    border-style: none;
    border-top: 1px solid #cdcdcd;
    color: inherit;
    font-size: inherit;
}

input.ez-edit:hover {
    text-decoration: underline;
    /* following "pencil" img from: http://enon.in/6j */
    background:url(../images/pencil.gif) no-repeat right #ffffdc; 
    border-style:1px hidden;
    border-top:1px solid #fff;
    border-right-color:#fff;
    border-bottom-color:#fff;
    border-left-color:#fff;
}

input.ez-edit:focus, input.ez-edit:focus:hover {
    display:inline-block;
    border:1px solid #4d4d4d;
    font-size:12px;
    background-color:#FFFFDc;
    color:#333;
    font-weight:normal;
}
于 2010-03-15T05:34:08.207 に答える
0

参照しているFlickrの関数は正確にはわかりませんが、入力のタイプをまったく変更せず、スタイルだけを変更することも検討してください。DOMをいじることなく、はるかに簡単で実行可能です。のような設定

background-color: white;
border-color: transparent;

テキスト入力をスパンのように見せます。

これの欠点は、とは異なるテキスト入力の<span>幅が常に固定されていることです。

于 2010-03-10T00:14:38.110 に答える