admin管理员组文章数量:1341737
Please do not give a negative vote if I am wrong with asking this question. I have a TextBox like this:
<input class="login-inpt" runat="server" name="loginName" type="text" value="User Name" />
It currently holds a default value. I want the default value to be cleared and replaced with a cursor when I click on the TextBox.
Please do not give a negative vote if I am wrong with asking this question. I have a TextBox like this:
<input class="login-inpt" runat="server" name="loginName" type="text" value="User Name" />
It currently holds a default value. I want the default value to be cleared and replaced with a cursor when I click on the TextBox.
Share edited Aug 29, 2013 at 18:49 ataravati 9,1659 gold badges59 silver badges93 bronze badges asked Aug 29, 2013 at 14:10 AJay GargAJay Garg 311 gold badge1 silver badge8 bronze badges 6- See this solution: stackoverflow./questions/4135818/… – nkirkes Commented Aug 29, 2013 at 14:13
- This question is pretty similar to yours: stackoverflow./questions/1626107/… – Niklas Commented Aug 29, 2013 at 14:14
-
1
Why do you have a
runat="server"attribute in an ASP.NET MVC 3 view? You seem to be making some confusions between Classic ASP.NET WebForms and ASP.NET MVC. Which of those 2 technologies are you using? – Darin Dimitrov Commented Aug 29, 2013 at 15:27 - Your question does not have anything to do with asp MVC. This is an html/javascript question. I edited your question. – ataravati Commented Aug 29, 2013 at 18:50
- I am working on Asp MVC3.I got the solution by using OnFocus and OnBlur event.thanks to all of you. – AJay Garg Commented Sep 3, 2013 at 5:34
7 Answers
Reset to default 8For newer browsers (IE>9):
<input type="text" id="userName" placeholder="User Name" />
For older:
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Placeholder support</title>
</head>
<body>
<input type="text" id="userName" placeholder="User Name" />
<script src="../js/vendor/jquery-1.10.2.min.js"></script>
<script src="../js/vendor/jquery-migrate-1.2.1.js"></script>
<script src="../js/vendor/modernizr-latest.js"></script>
<script src="../js/placeholder.js"></script>
</body>
</html>
placeholder.js (jQuery, Modernizr)
var Placeholder = (function ($, document) {
/* Static Content */
var _$document = $(document);
/* Events */
var _initPlaceholders = function () {
_$document.find('input:text').each(function () {
var $this = $(this);
$this.css({ color: '#888' }).val($this.attr('placeholder'));
});
};
var _placeholderEvent = function () {
var $input = $(this), placeholderValue = $input.attr('placeholder');
if ($input.val() === placeholderValue) {
$input.css({ color: '#000' }).val('');
return;
}
if ($input.val() === '') {
$input.css({ color: '#888' }).val(placeholderValue);
}
};
var _bindEvents = function () {
if (!Modernizr.input.placeholder) {
_initPlaceholders();
_$document.on('focus blur', 'input:text', _placeholderEvent);
}
};
var init = function () {
_bindEvents();
};
return {
init: init
};
})(jQuery, document);
Placeholder.init();
You can try this
<input type="text" value="user name" onfocus="if(this.value=='user name') this.value='';">
HTML:
<input type="text" value="user name" id="userName" />
With jQuery:
$(function() {
$('#userName').click(function() {
$(this).val('').unbind('click');
});
});
EDIT: Here's a demo
add the following as an attribute to your input tag:
onfocus="if(this.value=='A new value') this.value='';"
From: How to clear a textbox using javascript
I got the solution Thanks. input type="text" id="userName" onfocus="inputFocus(this)" onblur="inputBlur(this)"
function inputFocus(i) { if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } } function inputBlur(i) { if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } }You already got good answers but if you are newbie it might interest you how it could work without libraries.
Here is HTML:
<input id="textBox" class="textBox phrase" type="text" value="Enter Your Text..">
you don't need to set class and id you could pick one of them
Here is JavaScript:
var textBox = document.getElementById('textBox'), //probably the fastest method
/**************************additionally possible****************************
var textBox = document.getElementsByTagName('input')[0], //returns HTMLInputElement list (since we've got only one we chose the first one)
or
var textBox = document.querySelectorAll('textBox'), //works almost the same way as jquery does except you don't get all jquerys functionality
or
var textBox = document.getElementsByClassName('textBox')[0], //i guess its a least supported method from the list
***************************************************************************/
//text you want to choose for you input
phrase = "Enter Your Text..";
function addEvent(el, ev, fn) {
//checking method support
//almost every browser except for ie
if(window.addEventListener) {
el.addEventListener(ev, fn, false);
}
//ie
else if(window.attachEvent) {
el.attachEvent('on' + ev, fn);
el.dettachEvent('on' + ev, fn);
}
}
addEvent(textBox, 'focus', function (){
//cross browser event object
var e = e || window.event,
target = e.target;
//if the text in your text box is your phrase then clean it else leave it untouched
target.value = target.value === phrase ? "" : target.value;
});
addEvent(textBox, 'blur', function (){
//cross browser event object
var e = e || window.event,
target = e.target;
//if your text box is not empty then leave it else put your phrase in
target.value = target.value ? target.value : phrase;
});
$('.login-inpt').focus(function() {
$(this).val('');
});
$('.login-inpt').focusout(function() {
$(this).val('User Name');
});
check out here http://jsfiddle/TDUKN/
本文标签： javascriptWant to disapper input textbox default valueStack Overflow
版权声明：本文标题：javascript - Want to disapper input textbox default value - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743682789a2521402.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论