javascript - 关于 JavaScript OnFocus 的新手问题

Question

我必须像这样在 ASP.net 页面的文本字段中添加默认的灰色文本:

当用户点击/输入字段时，默认文本会消失。

如何在文本框事件中执行此操作？

我设法实现了更改文本颜色的 onFocus 事件；在我的 .aspx我创建的页面 <script> JS代码的标签:

<script type="text/javascript">
    function test(obj) {
        obj.style.color = "grey";
    }
</script>

代码隐藏:

txtBox.Attributes.Add("OnFocus", "test(this)")
'txtBox is the ID of text Box

现在问关于 JavaScript OnFocus 事件的非常基本的问题很尴尬。

但是问题是知识的关键 :)

编辑:我不能在我的 ASP.Net 页面中使用任何 HTML 标记

有什么帮助吗？谢谢。

Answer 1

尝试使用 jQuery

如何实现 jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

html:

<input type="text" />

CSS:

.grey { color:#aaa; }

jQuery:

var inputval = "";
$(document).ready(function() {
    // Define your default value to show on input
    $("input[type='text']").val("Enter your text here...");
    // Add grey color or optionally blur effect
    $("input[type='text']").addClass('grey');
    // Save your default value
    inputval = $("input[type='text']").val();
    $("input[type='text']").focusin(function() {
    // if textbox is empty or got the default value
    if ($(this).val() == "" || $(this).val() == inputval) {
        // Clear the box
        $(this).val("");
        // Remove grey color
        $(this).removeClass('grey'); }
    }).focusout(function() {
        // if textbox is empty
        if ($(this).val() == "") {
            // Put your Default value back
            $(this).val(inputval);
            // Add grey color
            $(this).addClass('grey'); }
    });
});

jsfiddle:http://jsfiddle.net/BerkerYuceer/SWc6g/

这实际上是一个非常糟糕的编码，但它应该能让您理解它是如何工作的。

编辑:这是更有效的版本

html:

<input type="text" />

jQuery:

$(document).ready(function() {
    Watermark("input[type='text']","Enter your text here...");
});

function Watermark(element, WatermarkString) {
    $(element).val(WatermarkString).css('color','#aaa');
    $(element).focusin(function() {
        if ($(this).val() == "" || $(this).val() == WatermarkString) {
            $(this).val("").css('color','#000'); }
    }).focusout(function() {
        if ($(this).val() == "") {
            $(this).val(WatermarkString).css('color','#aaa'); }
    });
};

jsfiddle:http://jsfiddle.net/BerkerYuceer/vLJ2U/