![](/img/trans.png)
[英]How to change the display value of two text boxes through the input value of another text box using javascript?
[英]display text box hint in two text boxes
我使用這個jquery函數來顯示文本框提示
這是功能
function textboxHint(id, options) {
var o = { selector: 'input:text[title]', blurClass:'blur' };
$e = $('#'+id);
$.extend(true, o, options || {});
if ($e.is(':text')) {
if (!$e.attr('title')) $e = null;
} else {
$e = $e.find(o.selector);
}
if ($e) {
$e.each(function() {
var $t = $(this);
if ($.trim($t.val()).length == 0) { $t.val($t.attr('title')); }
if ($t.val() == $t.attr('title')) {
$t.addClass(o.blurClass);
} else {
$t.removeClass(o.blurClass);
}
$t.focus(function() {
if ($.trim($t.val()) == $t.attr('title')) {
$t.val('');
$t.removeClass(o.blurClass);
}
}).blur(function() {
var val = $.trim($t.val());
if (val.length == 0 || val == $t.attr('title')) {
$t.val($t.attr('title'));
$t.addClass(o.blurClass);
}
});
// empty the text box on form submit
$(this.form).submit(function(){
if ($.trim($t.val()) == $t.attr('title')) $t.val('');
});
});
}
}
這是HTML
<form action="" method="" class="search" >
<input type="text" name="search" class="text" title="Search Subjects..." id="block" />
<input type="submit" name="submit" value="Search" class="submit" />
</form>
我打電話給這樣的功能..
$(document).ready(function() {
textboxHint("block");
});
這是工作..但問題是現在我需要使用此功能在兩個不同的文本框中顯示提示與兩個不同的ID。 例如:Id = block1和Id = block2等......
任何人都可以幫我修改這個功能嗎?
那這個呢:
$(document).ready(function() {
textboxHint("block1");
textboxHint("block2");
textboxHint("block3");
});
正如您所看到的,由於函數要求id作為參數,您可以通過多次調用函數來提供不同的id。
問候
如何修改函數以接收選擇器並遍歷每個元素:
function textboxHint(selector, options) {
$(selector).each(function(){
var o = { selector: 'input:text[title]', blurClass:'blur' };
$e = this;
$.extend(true, o, options || {});
if ($e.is(':text')) {
if (!$e.attr('title')) $e = null;
} else {
$e = $e.find(o.selector);
}
if ($e) {
$e.each(function() {
var $t = $(this);
if ($.trim($t.val()).length == 0) { $t.val($t.attr('title')); }
if ($t.val() == $t.attr('title')) {
$t.addClass(o.blurClass);
} else {
$t.removeClass(o.blurClass);
}
$t.focus(function() {
if ($.trim($t.val()) == $t.attr('title')) {
$t.val('');
$t.removeClass(o.blurClass);
}
}).blur(function() {
var val = $.trim($t.val());
if (val.length == 0 || val == $t.attr('title')) {
$t.val($t.attr('title'));
$t.addClass(o.blurClass);
}
});
// empty the text box on form submit
$(this.form).submit(function(){
if ($.trim($t.val()) == $t.attr('title')) $t.val('');
});
});
}
});
}
並稱之為:
<form action="" method="" class="search" >
<input type="text" name="search" class="text" title="Search Subjects..." class="block" id="block1" />
<input type="text" name="search" class="text" title="Search Subjects..." class="block" id="block2" />
<input type="submit" name="submit" value="Search" class="submit" />
</form>
$(document).ready(function() {
textboxHint(".block");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.