Jump to content

create own place holder


gongpex
 Share

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
Link to comment
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
 Share

×
×
  • Create New...