2

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

element.style { 颜色：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>
4

1 回答 1

3

要设置 a 的值，<textarea>您需要使用.val()：

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

或者

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

等等。让“占位符”代码正常工作很棘手。较新的浏览器允许：

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

他们为您管理这一切。

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

于 2013-10-05T13:11:07.803 回答