CODEWITHSUNDEEP
javascriptasp.netvb.netonfocus
AbdulAziz
AbdulAziz

Reputation: 6298

Newbie Issue About JavaScript OnFocus

I have to add a default grey text in a text field of an ASP.net page like this:

Image01

And when the user clicks/enters a field, the default text disappears.

How to perform this in text box event?

I manage to implement onFocus event for changing text color; In my .aspx page I create a <script> tag for JS Code:

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

Code behind:

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

Now that embarrassing asking very basic question about JavaScript OnFocus event.

But Question is a key of knowledge :)

Edit: I must not use any HTML tag in my ASP.Net Page

Any help? Thanks.

Upvotes: 1

Views: 273

Answers (5)

woodykiddy
woodykiddy

Reputation: 6455

I guess you are looking for watermark effect in a text field?

If so, there are a couple ways to do it.

1) use AjaxToolKit libraray (Watermark Effect Demo Here)
2) use 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>

Source:

Upvotes: 1

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7335

Try using jQuery

How to implement 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/

this is actually a really bad coding but it should make you understand how this works.

Edit: Here is more efficent version

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/

Upvotes: 2

RobG
RobG

Reputation: 147413

I know nothing about ASP.NET, but since you can add an onfocus listener, you should be able to do something like:

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

where the updateValue function is:

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

The above mimics the placeholder attribute, which (IMO) is an annoying interface feature that should rarely be used.

Upvotes: 1

udidu
udidu

Reputation: 8588

Is this what you meant to do?

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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Is it possible to generate something like this?

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

So you need to actually add this placeholder="Enter your text here..." attribute to the <input /> tag.

Upvotes: 1

Related Questions