Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    hinting text in field

    I'm trying to figure out how to use a field title as a hint inside a field, but I'm not having any luck. I don't know if an inline class switch onblur/live is creating a clash with what I'm trying to do. The inline code is just a switch for some css that changes the look of a field when it's live.

    Code:
    <!-- first, this is the script I was trying to get working -->
    <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    	$(document).ready(function() {
    		$("#phone").attr("class", "reg_off");
    		$("#phone").val("Enter search terms here");
    
    		$("#phone").focus(function() {
    			var className = $("#phone").attr("class");
    			if (className == "reg_off") {
    				$("#phone").val("");
    				$("#phone").attr("class", "reg_live");
    			}
    		});
    
    		$("#phone").blur(function() {
    			if ($("#phone").val().length == 0) {
    				$("#phone").attr("class", "reg_off");
    				$("#phone").val("Enter search terms here");
    			}
    		});
    	});
    //]]>
    </script>
    
    
    and here's the two form fields I'm using to test this:<br>
    
    <form name="register1" class="registration_form" method="post" action="register1.php" target="_self" onsubmit="return myForm()">
    <input style="width:120px;" title="111-111-1111" type="text" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" name="phone" id="phone" value="" />
    <br>
     <b>Second phone</b><br><input style="width:120px;"  title="111-111-1111" type="text" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" name="phone2" id="phone2" value="" />
    <input type="submit" value="Submit"  class="buttontype" onclick=”this.disabled=true;“/>
    </form>
    
    
    <!-- and, just in case, here's the css... -->
    <style>
    
    .reg_off {
    	border-width:2px;
    	padding: 2px;
    	border: solid 2px #0099ff;
    	color: #AAAAAA;
    
    	}
    	
    .reg_live {background-color:#ffff99;
    	border-width:2px;
    	padding: 5px;
    	border: solid 2px #ff9900;
    
    	}
    
    .registration_form input { 
    -moz-border-radius:6px; /* Firefox */
    -webkit-border-radius: 6px; /* Safari, Chrome */
    -khtml-border-radius: 6px; /* KHTML */
    border-radius: 6px; /* CSS3 */
    padding: 2px;
    border: solid 2px #0099ff;
    
    }
    </style>

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    33
    Thanks
    6
    Thanked 1 Time in 1 Post
    I dont get what you are trying to do

    you want some Text inside a text field ? telling the user what you are looking for ?

    if so you can just use placeholder="someText"

    to get placeholder to work in IE you can use jquery
    Code:
    <style type="text/css">
        			.placeholder
    			{
      color: gray;
      }
            </style>
    
    	   
    
    <!----- jQuery to allow PlaceHolder Text on IE ----->
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    		</script>
    
    
    <!--- JavaScript For Placeholder ----->
    	<script type="text/javascript">
    	
    $(function() {
    	var input = document.createElement("input");
        if(('placeholder' in input)==false) { 
    		$('[placeholder]').focus(function() {
    			var i = $(this);
    			if(i.val() == i.attr('placeholder')) {
    				i.val('').removeClass('placeholder');
    				if(i.hasClass('password')) {
    					i.removeClass('password');
    					this.type='password';
    				}			
    			}
    		}).blur(function() {
    			var i = $(this);	
    			if(i.val() == '' || i.val() == i.attr('placeholder')) {
    				if(this.type=='password') {
    					i.addClass('password');
    					this.type='text';
    				}
    				i.addClass('placeholder').val(i.attr('placeholder'));
    			}
    		}).blur().parents('form').submit(function() {
    			$(this).find('[placeholder]').each(function() {
    				var i = $(this);
    				if(i.val() == i.attr('placeholder'))
    					i.val('');
    			})
    		});
    	}
    });
    
    </script>

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I do is change the background image of the text box. You can do that with

    Code:
    window.document.form.text.backgroundImage="url('path/to/image.gif')";
    and make a blurry image of the text you want.

    Then use the text box's onFocus event to remove the background image.
    UNDER CONSTRUCTION


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •