关于JavaScript OnFocus的新手问题

Question

我必须在ASP.net页面的文本字段中添加默认的灰色文本，如下所示：

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

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

我设法实现onFocus事件来更改文本颜色； 在我的.aspx页面中，为JS代码创建一个<script>标记：

<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/

Answer 2

是否有可能生成这样的东西？

<input type="text" placeholder="Enter your text here..." />

因此，您实际上需要将此placeholder="Enter your text here..."属性添加到<input />标记。

Answer 3

这是你的本意吗？

<html>
<head></head>
<body>
    <input id="serachbox" type="text" onFocus="initText(this);" />

    <script type="text/javascript">

        var defaultText = 'Enter your serach here...'
        var initText = function(el){
            if(el.value == defaultText){
                el.value = "";
            }
        }

        var input = document.getElementById('serachbox');

        input.value = defaultText;
    </script>

</body>
</html>

Answer 4

我对ASP.NET一无所知，但是由于您可以添加onfocus侦听器，因此您应该能够执行以下操作：

txtBox.Attributes.Add("Value", "Enter your text here...")
txtBox.Attributes.Add("OnFocus", "updateValue(this)")
txtBox.Attributes.Add("OnBlur", "updateValue(this)")

其中updateValue函数是：

function updateValue(el) {
    if (el.value == el.defaultValue) {
      el.value = '';
    } else {
      el.value = el.defaultValue;
    }
}

上面的内容模仿了占位符属性，该属性（IMO）是令人讨厌的界面功能，应很少使用。

Answer 5

我猜您在寻找文本字段中的水印效果吗？

如果是这样，有几种方法可以做到这一点。

1）使用AjaxToolKit libraray（此处为水印效果演示）
2）使用HTML + CSS + jQuery

<input type="text" id="text1" value="some text"/>
<script type="text/javascript">
  $(document).ready(function() {
    var tbval = $('#text1').val();
    $('#text1').focus(function() { $(this).val('');});
    $('#text1').blur(function() { $(this).val(tbval);});
  });
</script>

资源：

关于JavaScript OnFocus的新手问题

问题描述

5 个解决方案

解决方案1
2 已采纳 2012-10-10 13:34:01

解决方案2
1 2012-10-10 11:58:31

解决方案3
1 2012-10-10 12:26:59

解决方案4
1 2012-10-10 12:41:05

解决方案5
1 2012-10-10 12:54:01

关于JavaScript OnFocus的新手问题

问题描述

5 个解决方案

解决方案1 2 已采纳 2012-10-10 13:34:01

解决方案2 1 2012-10-10 11:58:31

解决方案3 1 2012-10-10 12:26:59

解决方案4 1 2012-10-10 12:41:05

解决方案5 1 2012-10-10 12:54:01

解决方案1
2 已采纳 2012-10-10 13:34:01

解决方案2
1 2012-10-10 11:58:31

解决方案3
1 2012-10-10 12:26:59

解决方案4
1 2012-10-10 12:41:05

解决方案5
1 2012-10-10 12:54:01