Label onzichtbaar maken als er een karakter in de textbox staat

[stevebravo]

Hoe kan ik een label onzichtbaar maken als er text in de input staat, maar de label moet weer zichbaar zijn als de textbox leeg is...

bedankt

 

[yayme]

Visual basic ?

 

[yayme]

bij visual basic zou je zo iets kunnen doen zo :

Dubbelklik op textbox ,
zet de code er in :
if texbox1.text = "" then
label1.visible = true
else
label1.visible = false

 

[stevebravo]

bedankt voor je inbreng yayme, maar we zitten hier in de javascript subforum.. dus dan zal mijn vraag ook gebaseerd zijn op javascript

 

[Robin S]

Wat bedoel je precies met een 'label'? Ik heb ooit de onderstaande functie setInputDefault gemaakt. In combinatie met de CSS krijg je een standaard lichtgrijze, italic waarde in je input-element die verdwijnt als je zelf wat invoert en terugkeert als je het tekstveld leegmaakt.

CSS:

input.default {
    font-style: italic;
    color: #999;
    font-weight: lighter;
}

[JS]function setInputDefault(input, value) {

var userValue = false;
input.value = value;
addClass(input, "default");

addEvent(input, "focus", function() {
if (!userValue && this.value == value) {
userValue = true;
removeClass(this, "default");
this.value = "";
}
}, false);
addEvent(input, "blur", function() {
if (userValue && this.value == "") {
userValue = false;
addClass(this, "default");
this.value = value;
}
}, false);
}
function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(type, callback, useCapture);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + type, callback);
}
else {
console.warn("Failed to add " + type + "-event, ", obj);
}
}

function classNameReg(className) {
return new RegExp("(^|\\s)" + className + "(\\s|$)", "g");
}
function addClass(el, className) {
var reg = classNameReg(className);
el.className = trim(el.className.replace(reg, "") + " " + className);
}
function removeClass(el, className) {
el.className = el.className.replace(classNameReg(className), " ").replace(/\s\s+/g, " ");
}
function trim (str) {
return str.replace(/^\s+|\s+$/g, "");
}[/JS]

 

[stevebravo]

Ik heb het al zelf gefixed.. maar nu moet ik nog 1 element meepakken... en dat is wanneer je backspace gebruikt om de textbox leeg te maken.. dat direct die label weer wordt getoond

var text = $("input#name");
$("input#name").focusin(
      function () {
        
        $(this).css({"background-image":"url('/assets/images/button-background-hover.png')"});
        $("label#label-name").animate({
            opacity: 0.6
        },500);
        text.keypress(function(){
            $("label#label-name").hide(); 
                    
        });       
      }
      
    );
$("input#name").focusout(
      function () {
       
        $(this).css({"background-image":"url('/assets/images/button-background-standard.png')"});
        $("label#label-name").animate({
            opacity: 1.0
       },500);
       if(!text.val() || text.val() == ''){
         $("label#label-name").show();
       }
      }
);

 

[Robin S]

test

Probeer dit principe maar eens

[JS]var Keys = {
BACKSPACE: 8,
DELETE: 46
};

var text = document.getElementById("name");
addEvent(text, "keydown", function(e) {
if (e.keyCode == Keys.BACKSPACE && this.value == "") { //De test (this.value == "") lijkt me trwns ook wel voldoende
//...
}
}, false);[/JS]

Of met jQuery zo (denk ik):
[JS]var text = $("input#name");
text.keydown(function(e) {
if (e.keyCode == Keys.BACKSPACE && this.value == "") {
//...
}
});[/JS]

 

[stevebravo]

Probeer dit principe maar eens

dank voor je reactie, echter denk ik niet dat dit de methodiek is die ik zoek..