javascript - 那里出了什么问题？ textarea 什么都不显示，但值是

Question

我编写了一个代码，以灰色文本区域向用户显示提示；接下来是想法:
1)最初在区域是灰色的“请在那里输入您的查询”；
2)如果用户点击它，颜色变为黑色，文本变为''。这部分工作正常
3) 如果用户输入，但不是删除(即留空)，我们需要将“请在此处输入您的询问”设置为灰色；这在 Chrome 和 Firefox 中都不起作用。
它什么都不显示。当我使用 chrome inspector 时，它显示

element.style { color: rgb(141, 141, 141); }

什么是正确的，HTML 中的“请在此处输入您的查询”什么也是正确的，但字段是空的。可能是什么问题？？？我特地放了 console.log 并且它们还显示应该是...的输出

这是 HTML:

<textarea name='contact_text'  id='contact_text'  
                        onclick='text_area_text_cl();' onBlur='text_area_text_fill();'> 
                </textarea>

<script>
    var contact_text_changed = false;
    var contact_contacts_changed = false;

    function text_area_text()
    { 

            if (contact_text_changed == false)
            {
                $("#contact_text").css("color","#8d8d8d");
                $("#contact_text").html('Please, type your enquiry there');
            }
            else
            {
                $("#contact_text").css("color","#000000");

            }
              // Write your code here       
    };
    function text_area_text_cl()
    {
        if (contact_text_changed == false)
        {
            $("#contact_text").text('');
            $("#contact_text").css("color","#000000");
            console.log('sdfdfs111');
            contact_text_changed = true;
        }
    };
    function text_area_text_fill()
    {
        if ($("#contact_text").val() == '')
        {
            contact_text_changed = false;
            $("#contact_text").css("color","#8d8d8d");
            $("#contact_text").html('Please, type your enquiry there');
            //document.getElementById('contact_text').innerHTML = 'Please, type your enquiry there'
            console.log('sdfdfs');
        }
        else
        {
            console.log('__');
        }
    };
    // call funcitons to fill
    text_area_text();

</script>

Answer 1

设置一个<textarea>的值你需要使用 .val() :

$("#contact_text").val('');

或

$("#contact_text").val('Please, type your enquiry there');

等让“占位符”代码正常工作是很棘手的。 Newer browsers allow :

<textarea placeholder='Please, type your enquiry there' id='whatever'></textarea>

他们为您管理一切。

编辑 — 从评论中，这里解释了为什么会出现 .html()最初有效(好吧，它确实有效，但请继续阅读)。 <textarea> 的标记内容元素——即元素中包含的 DOM 结构——表示 <textarea> 的初始值。 .在任何用户交互之前(和/或在 DOM 的“值”属性被 JavaScript 触及之前)，这就是显示为字段值的内容。然后，更改 DOM 的那部分会更改该初始值。但是，一旦有一些用户交互，初始值就不再与页面 View 相关，因此不会显示。仅显示更新后的值。