输入值为空时显示最后一个字符串？

这是我的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

输入值为空时显示最后一个字符串？

回答

相关问题