Jump to content
Sign in to follow this  
gongpex

create own place holder

Recommended Posts

Hello everyone,

On modern browser commonly we put  :

<input type="text" placeholder="Your Value" />

To display placeholder's value.

But how about in old browser such IE7?

I've tried to made own code used jquery and these my code :

HTML :

<input type="text" class="form-control placeholder" watermark="Your Name" id="name" />

JQUERY

		function placeholder(){
			var holder = $(".placeholder");
			var content_holder = holder.attr("watermark");
			holder.val(content_holder);
			
			holder.focus(function(){
				$(this).selectRange(0,0);
			});
		
			holder.keyup(function(){
				if(holder.val().length == 0){
					holder.val(content_holder);
					$(this).selectRange(0,0);
				} 
			});
			
			holder.keypress(function(){
				if(holder.val() == content_holder) {
					holder.val("");				
				} 
			});
		}
		
		
		$.fn.selectRange = function(start, end) {
				if(!end) end = start; 
				return this.each(function() {
					if (this.setSelectionRange) {
						this.focus();
						this.setSelectionRange(start, end);
					} else if (this.createTextRange) {
						var range = this.createTextRange();
						range.collapse(true);
						range.moveEnd('character', end);
						range.moveStart('character', start);
						range.select();
					}
				});
		};

my codes as far runs well but still have flaw (not like as properly placeholder).

if you clicked on input, the cursor position still able go to last character from ("your name"), not at position 0,0 (first character).

Q : how to make so that the cursor position at range 0,0 (first character) / same as properly placeholder?

please help me

Thanks

 

Edited by gongpex
misspell

Share this post


Link to post
Share on other sites

When the element receives focus, check if the value of the element is the default placeholder value and, if so, set the value to empty.  Do the opposite when the element loses focus.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×