輸入值爲空時顯示最後一個字符串？

這是我的HTML塊輸入值爲空時顯示最後一個字符串？

<div class="panel-heading"> 
    <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#q1"> 
    Question 1 
    </a> 
    </h4> 
</div> 
<div id="q1" class="panel-collapse collapse"> 
    <div class="panel-body"> 
    <div class="form-group"> 
     <label for="inputQ1" class="col-sm-2 control-label">Question</label> 
     <div class="col-sm-7"> 
     <input type="text" class="form-control" id="inputQ1" placeholder="e.g How was our service?"> 
     </div> 
    </div> 
    </div> 
</div>

和Jquery的

$('.panel-body input').keyup(function() { 
    $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value); 
});

基本上這樣做是什麼，無論在輸入框中的用戶類型，它會在錨標記顯示。

現在，我面臨的問題是，當用戶鍵入內容並決定刪除輸入框中的內容時，那麼錨標記將不再具有內容。理想情況下，每當輸入框被關注時，它應該始終顯示以前的內容。我希望我的問題的說明不夠清楚......

下面就來的jsfiddle 鏈接http://jsfiddle.net/SpLsZ/

來源

2014-02-28 InYourDreamz

我有更新您的提琴，檢查：http://jsfiddle.net/SpLsZ/2/

我把一個數據變量value放在你的錨標籤中。當你的文字內容發生變化時，我現在正在檢查它是否有價值。如果不是，我正在檢索數據value並將其作爲文本值插入。

<a href="#q1" 
    data-toggle="collapse" 
    data-parent="#accordion" 
    data-value="Question 1" 
>Question 1</a>

$('.panel-body input').keyup(function() { 
    var header = $(this).closest('.panel-collapse').prev('.panel-heading').find('a'); 

    if(this.value == "") { 
     header.text(header.data("value")); 
    } else { 
     header.text(this.value); 
    } 
});

來源

2014-02-28 09:39:07 alalp

@Anton我沒有想過在這些行中對代碼進行縮短，我專注於數據價值，感謝提示。 – alalp

@Anton甚至更短：'header.text（this.value || header.data（「value」））'。 – leaf

@procrastinator啊真的:) – Anton

試試這個：

$('.panel-body input').keyup(function() { 
    $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(
     this.value || 'Question 1' 
    ); 
});

Working Fiddle

來源

2014-02-28 09:36:25

如果問題2？ – Sai

有很多方法可以完成這項工作。 OP可以將該值存儲爲屬性並從那裏恢復。 –

@procrastinator：感謝編輯 –

工作小提琴：http://jsfiddle.net/SpLsZ/4/

更改你的HTML標記，像這樣：

<a data-toggle="collapse" data-parent="#accordion" href="#q1"> 
    <span class="question">Question 1</span> 
    <span class="answer"></span> 
</a>

這樣你就不必擔心存儲任何值。而JavaScript到：

$('.panel-body input').keyup(function() { 
    var $link = $(this).closest('.panel-collapse').prev('.panel-heading').find('a'); 
    var $question = $link.find('.question'); 
    var $answer = $link.find('.answer'); 

    if (this.value) { 
     $question.hide(); 
     $answer.text(this.value); 
    } else { 
     $question.show(); 
     $answer.empty(); 
    } 
});

當你有你隱藏qestion文本並顯示答案，如果沒有值進入演藝問題和答案的空任何價值。

來源

2014-02-28 09:42:52 iappwebdev

嘗試

$('.panel-body input').keyup(function() { 
    $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value); 
}).blur(function() { 
    if ($.trim(this.value) == '') { 
     $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(function() { 
      return $(this).data('default') 
     }); 
    } 
}); 
$('.panel-heading a').each(function() { 
    $(this).data('default', $(this).text()); 
})

演示：Fiddle

來源

2014-02-28 09:43:23

輸入值爲空時顯示最後一個字符串？

回答

相關問題