Question

i have a text-box in my tree that is generated run-time for giving the user to enter the node in the textbox i have given a water-marker message to enter something on the click function of textbox i have cleared the textbox but on the key press event also i want the text to be cleared but not able to do it i have pasted my code

function CreateTextBoxNode(SpnPrntId) {
var elem = document.createElement("input");
elem.type = "text";
elem.id = "txtParent";
elem.value = "Enter node name";
$(elem).css("color", "DarkGray");
elem.setAttribute('onblur', 'SetSpanValueForParent("' + SpnPrntId + '")');
$(elem).keypress(function(e) {
    SetEnterValue(SpnPrntId, e);
});
$(elem).click(function() {
    textClick();
});
$(elem).focus(function() {
    textClick();
});
return elem;

}

function SetEnterValue(prntID, e) {
var key = checkBrowser(e);
if (key == 13) {
    SetSpanValueForParent(prntID);
}

}

function textClick() {
$(“#txtParent”).val(”);
}

On key press when enter is pressed i have to append the value into some span i also tried its focus function so when the first time the textbox come with focused set it removes the message.

Answer 1

I think it would be a lot easier for you to use a placeholder which will work in many modern browsers (Firefox, Chrome, Etc), and then maybe a jquery plugin to make it work with the incompatible browsers.

Here’s another really simple version
https://github.com/brandonweiss/jquery-placeholder

I’ve used this approach in my web apps and it works great. The best part is the reusability of it. Every time you need a watermark, you simply add the placeholder tag to your input and you’re done.

<input placeholder="Enter a valid email address" name="email" id="email" />