要取消映射输入文本框的默认值
Want to disapper input textbox default value
如果我问这个问题有错,请不要投反对票。我有一个这样的文本框:
<input class="login-inpt" runat="server" name="loginName" type="text" value="User Name" />
它当前保持默认值。我希望在单击TextBox时清除默认值并用光标替换。
对于较新的浏览器(IE>9):
<input type="text" id="userName" placeholder="User Name" />
对于较旧版本:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/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>
占位符.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();
你可以试试这个
<input type="text" value="user name" onfocus="if(this.value=='user name') this.value='';">
HTML:
<input type="text" value="user name" id="userName" />
使用jQuery:
$(function() {
$('#userName').click(function() {
$(this).val('').unbind('click');
});
});
编辑:这是一个演示
将以下内容作为属性添加到输入标记中:
onfocus="if(this.value=='A new value') this.value='';"
发件人:如何使用javascript 清除文本框
我得到了解决方案,谢谢。input type="text"id="userName"onfocus="inputFocus(this)"onblur="inputBlur(this))"
函数inputFocus(i){if(i.value==i.defaultValue){i.value=";i.style.color="#000";}}你已经得到了很好的答案,但如果你是新手,你可能会对它在没有库的情况下如何工作感兴趣。
这是HTML:
<input id="textBox" class="textBox phrase" type="text" value="Enter Your Text..">
你不需要设置类和id,你可以选择其中一个
以下是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');
});
在这里结账http://jsfiddle.net/TDUKN/
相关文章:
- 如何为显示jquery滑块值的文本框设置默认值
- 文本框的一部分为只读,具有默认值
- Sharepoint 2013 Javascript ClientPeoplePicker默认值文本
- 在发送之前,点击按钮清除多个输入[类型=文本]默认值
- 如果文本框为空,则将其返回到默认值
- 清除输入,模糊文本区域和默认值(如果字段为空)
- Angularjs URL 在文本区域中的默认值中
- Onclick 事件以删除文本输入字段中的默认值
- 如何为 Google 放置 API 自动完成文本框设置默认值
- 如何“取消设置”Dojo 日期文本框默认值
- 如何在输入文本中设置默认值(美元或欧元)
- 要取消映射输入文本框的默认值
- 如何覆盖默认值“;文本“;鼠标下移,鼠标移动
- 在 Jquery EasyUI 对话框中设置输入文本框的默认值
- 如何将文本区域的值恢复为默认值
- 在使用jQuery输入文本之前,使文本框中的默认值不变
- AngularJS文本输入使用ng模型,但需要默认值,而不使用value=或ng-init=
- javascript:具有默认值的文本框
- 通过单击SELECT选项,将文本INPUT元素的VALUE动态设置为默认值
- 设置输入文本默认值,并选择选项值,然后禁用