create own place holder

[gongpex]

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 April 3, 2018 by gongpex
misspell

[justsomeguy]

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.