Question

我的textarea在焦点和模糊方面遇到问题。它的假设是采用两个变量“textField”和“textDefault”。 textDefault保存textarea在加载页面时具有的内容。我将其添加到变量中，因为我需要将当前内容与原始内容进行比较。

我使用textarea的.html（），如果它等于textDefault中的文本，我会执行$（this）.html（“”）来删除内部html。然后在模糊我做相反的事情。我检查textField是否等于“”，如果是，则将textDefault的值重新放回textarea中，使用$（this）.html（textDefault）。

我遇到的问题是，通过单击和关闭textarea可以正常工作，但是如果您将数据输入textarea，然后一直退回，它不会将原始数据放回textarea。

有什么建议吗？下面是代码：

PS：我忘了提到，在那里我将高度设置为自动对焦，为了使textarea成为内容的高度，然后我在模糊时将高度设置为190。只是fyi这样，当你只输入2个单词时，textarea不是100英尺高。

var textField;
var textDefault = "Click the title to add a title for this admin dashboard panel. Click     here to add a body. This body can contain html, or regular text.\n\nIt can be used for admin notes mainly, but to communicate with other admins as well.\n\nContact the developer of this website (max@haintmorgan.com) to have this widget actually contain php driven content.";

$('.admin-note-body textarea').focus(function(){
    textField = $(this).html();

    if(textField == textDefault){
        $(this).html("");
        $(this).css('height', 'auto');
    }
}).blur(function(){
    if($('.admin-note-body textarea').html() == ""){
        $('.admin-note-body textarea').html(textDefault);
        $(this).css('height', '190px');
    }
});

HTML：

<textarea rows="" cols="">Click the title to add a title for this admin dashboard panel. Click here to add a body. This body can contain html, or regular text.

It can be used for admin notes mainly, but to communicate with other admins as well.

Contact the developer of this website (max@haintmorgan.com) to have this widget actually contain php driven content.</textarea>

为了节省你的时间，

点击标题为此管理信息中心面板添加标题。单击此处添加正文。这个主体可以包含html或常规文本。\ n \ n主要用于管理员注释，但也可以与其他管理员进行通信。\ n \ n请联系本网站的开发者（max@haintmorgan.com）进行此操作小部件实际上包含php驱动的内容。

这是textDefault的内容。它在没有\ n \ n的html上的三行（注意\ n \ n）上执行相同的内容。 \ n两次完成，因为每个迷你段都有一个换行符。

感谢任何帮助！

谢谢，大卫

PSS：注意190px的高度可以工作，但html没有。我注意到在textField和.html（）以及textDefault所有的东西上都做了console.log，无论如何都能保持相同的值。

Answer 1

使用.val()而不是.html()

此外，您可以更好地利用$(this)：

来清理代码

$('.admin-note-body textarea').focus(function(){
    if($(this).val() == textDefault){
        $(this).val("");
        $(this).css('height', 'auto');
    }
}).blur(function(){
    if($(this).val() == ""){
        $(this).val("");
        $(this).css('height', '190px');
    }
});

HTML5中的placeholder属性也可以在不需要Javascript的情况下执行此操作：

http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute

Answer 2

解决方案很简单：使用.val()代替.html()来访问textarea的内容。

Textarea不会在模糊的情况下表现出色

2 个答案: