1

これはコードです: Jsfiddle

  1. リンクを dblclicking するか、a内部をクリックしてテキスト値を編集できるフォームがあります。diva
  2. Onblur のテキスト値には、1. の条件で表示される入力ボックスの値が割り当てられますa。

問題:入力を空にしてぼかすと、aのテキストがに設定され""ます。この時点で、div周囲が崩壊し、ユーザーがアクセスできなくなります。

この崩壊が起こらないようにするにはどうすればよいでしょうか。

4

4 に答える 4

2

このようにするだけで、問題は解決されます。

ぼかしでは、値の長さがゼロであることを確認してから、入力フィールドを表示するか、ハイパーリンクを表示します。

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            if ($(this).val().length == 0)
                $(this).show();
            else
                $(this).hide().prev().show().find('a').html(this.value);
        });
    }    
);

このライブデモを参照してください

于 2012-06-22T21:14:13.943 に答える
1

この仲間はどうですか？

http://jsfiddle.net/jaspermogg/EdtC2/4/

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
        this.value == "" ? $(this).hide().prev().show().find('a').html("[insert text here]") : $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

入力ボックスが空の場合、a「[ここにテキストを挿入]」に設定されます。それとも、事実上見えない状況を望んでいますか? その場合、たとえば、テキストの色を背景に合わせていつでも変更できますか?

于 2012-06-22T21:24:05.013 に答える
0

これを試してください。

入力が削除された後でもdivが表示/クリックできるように、境界線、デフォルトの幅と高さを追加しただけです。あなたはそれをする必要はないかもしれません。

于 2012-06-22T20:51:57.083 に答える
0

まったくバグではありません。タグaが空です。折りたたまれています。

このデモを参照してください。崩壊しないようにCSSを設定する必要があります。たとえば、境界線により、期待どおりに機能します。パディングまたはマージンを追加しても機能します。インラインブロックを表示すると、余分な境界線、パディング、またはマージンなしで修正されます。

.a0 a {
    display: inline-block;
}​
于 2012-06-22T20:51:13.337 に答える