[英]javascript : text box with default value
I have text boxes with default values, I am not able to enter values into them when i am trying to enter, I have to first delete the existing value using delete key then only i can enter. 我有带有默认值的文本框,尝试输入时无法在其中输入值,我必须先使用Delete键删除现有值,然后才能输入。
I want to enter values and on tab change it should change for the other box as well, currently it is changing focus but I cannot enter values into them. 我想输入值,并且在选项卡更改时,其他框也应更改,当前它正在更改焦点,但是我无法在其中输入值。
<input type="text" name="namebox" id="{concat('textboxvalue', position())}" value="{@proj}" style="font-size:10px;padding:0px;height:15px;width:90px;text-align:right;"/>
@proj
: values coming from database @proj
:值来自数据库
Thanks, Ani 谢谢阿妮
You can use placeholders in the input tags and textarea tags: 您可以在输入标签和textarea标签中使用占位符:
<input type='text' placeholder='Default text here' />
<textarea placeholder='Default text here'></textarea>
Then use fallback with jQuery: 然后对jQuery使用后备广告:
$(document).ready(function(e){
var defaultVal = "Default text here";
$("input, textarea").val(defaultVal).on("focus", function(){
if($(this).val() == defaultVal){
$(this).val("");
}
}).on("blur", function(){
if($(this).val() == ""){
$(this).val(defaultVal);
}
});
});
Here: http://jsfiddle.net/EZexQ/1/ 此处: http : //jsfiddle.net/EZexQ/1/
I would suggest you to have a look at this css-trick article . 我建议您看看这篇css-trick文章 。
It has an example with html5 placeholder attribute with jquery fallback. 它有一个带有jQuery后备的html5占位符属性的示例。
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};
if (!elementSupportsAttribute('textarea', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}
On the focus. 在焦点上。 Just remove the values.
只需删除值。 Following is sample code in jquery.
以下是jquery中的示例代码。 Can be done with plain javscript though.
可以用普通的脚本完成。
<input value=10>
<input value=20>
<input value=30>
$('input').on('focus', function(){
$(this).val('')
})
There is a DOM property called defaultValue for input elements. 输入元素有一个称为defaultValue的DOM属性。 Am giving this solution as the placeholders do not work in older browsers.
之所以提供此解决方案,是因为占位符在较旧的浏览器中不起作用。
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
In your jQuery, it can be accessed by prop('defaultValue')
So try this. 在您的jQuery中,可以通过
prop('defaultValue')
访问它。
$('input').focus(function(){
if($(this).val() == $(this).prop('defaultValue'))
$(this).val('');
}).blur(function(){
if($(this).val() == '')
$(this).val($(this).prop('defaultValue'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.