Question

I am trying to modify following script to do this check:

Check if input VALUE and ALT are the same.

If yes: empty VALUE

If no: keep VALUE

This is the script I am working on: (the part that i commented out, is where i tryed to figure out how to make the changes myself).

    <script language="Javascript" type="text/javascript">
        //<![CDATA[
        jQuery.fn.placeholder = function(){
            return this.each(function(){
                var element = $(this)
                var insertedNow =element.after("<span class='placeholder-spanbox'>"+ element.attr('alt')+ "</span>").attr("alt","").next('.placeholder-spanbox');
                var leftOffset = (element.innerWidth() - element.width())/2+parseInt(element.css("border-left-width"));
                var topOffset = ((element.innerHeight() - element.height())/2)+parseInt(element.css("border-top-width"));
                var inputWidth = element.width();   
                var inputHeight = element.height(); 
                var placeholderPos = inputHeight + topOffset + leftOffset;

                insertedNow.css("padding-left",leftOffset+"px").css("padding-top",topOffset+"px").css("opacity",0.5).css("display","block").css("margin-top",-placeholderPos).css("cursor","text");
                var objCSS = {'-webkit-transition':'opacity 100ms ease-in','-moz-transition':'opacity 100ms ease-in','-o-transition':'opacity 100ms ease-in','-ms-transition':'opacity 100ms ease-in','transition':'opacity 100ms ease-in','font-size':element.css('font-size'),'font-family':element.css('font-family'),'color':'#000000','font-weight':element.css('font-weight'),'width':element.css('width'),'float':element.css('float')};
                insertedNow.css(objCSS);
                //insertedNow.offset(element.offset());
                element.bind("focus",updateSpanStatusFocus);
                element.bind("keydown",updateSpanStatusKeyDown);
                element.bind("keyup",updateSpanStatusKeyUp);
                element.bind("blur",updateSpanStatusBlur);
                insertedNow.bind("click",clickSpanBox);


                var inputVal = element.attr("value");
                var inputAlt = element.attr("alt");

                //$(this).attr("value",+inputVal);

                // if(inputVal == inputAlt){
                //  $(this).attr("value","123");
                // }    

                if(element.val()!==""){
                    insertedNow.css({'opacity':0});
                }
            });
            function clickSpanBox(event){
                event.preventDefault();
                var inputBox = $(this).prev();
                inputBox.focus();
            }
            function updateSpanStatusFocus(event){
                var $this= $(this);
                if($this.val()==""){
                    var spanBox = $this.next('.placeholder-spanbox');
                    spanBox.css("opacity","0.3");
                }
            }
            function updateSpanStatusKeyUp(event){
                var $this= $(this);
                if($this.val()==""){
                    var spanBox = $this.next('.placeholder-spanbox');
                    spanBox.css("opacity","0.3");
                }
            }
            function updateSpanStatusKeyDown(event){
                var $this = $(this);
                if($this.val()=="" && (event.keyCode>54 || event.keyCode == 32)){
                    var spanBox = $this.next('.placeholder-spanbox');
                    spanBox.css("opacity","0");
                }
            }
            function updateSpanStatusBlur(){
                var $this= $(this);
                $this.val(Trim($this.val()+''));
                if($this.val()==""){
                    var spanBox = $this.next('.placeholder-spanbox');
                    spanBox.css("opacity","0.5");
                    spanBox.css("color","#000000");
                }
            }
        }

        $(document).ready(function(){
            $('.spanOverlay').placeholder();
        });

        //]]>
    </script>

And here the html markup example:

<input type='text' name="userName" class='contactInput spanOverlay' alt='* Name' value='test'></input>

Thanks for your help!!

Answer 1

Is this what you want?

if (element.val() == element.attr('alt')) {
    element.val("");
}