我实现了一些 jQuery 来在输入元素中显示默认消息。然后我将输入元素放入 jQueryUI 对话框中。它工作正常，除非您在输入中输入一些文本，然后关闭对话框，然后打开对话框，这会在输入元素中错误地显示最近输入的文本。我如何修改它以便每次打开对话框时都重新出现原始文本？请看http://jsfiddle.net/Mxf7s/一个活生生的例子和下面的脚本。谢谢
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$("#openDialog").click(function(){$("#myDialog").dialog('open');return false;});
$( "#myDialog" ).dialog({
modal: true,
autoOpen : false,
open : function() {
$('#myInput').blur(); //Required if this input is the first one on the dialog since it will automatically be focused on
//$('#myInput').val('New Default value1').blur();
},
close : function() {
//$('#myInput').val('New Default value2');
},
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
$('.default-value').each(function() {
var $t=$(this), default_value = this.value;
$t.css('color', '#929292');
$t.focus(function() {
if(this.value == default_value) {
this.value = '';
$t.css('color', 'black');
}
});
$t.blur(function() {
if($.trim(this.value) == '') {
$t.css('color', '#929292');
this.value = default_value;
}
});
});
});
</script>
</head>
<body>
<button id="openDialog">Click</button>
<div id="myDialog" title="My Dialog">
<input type="text" value="Original Default value" class="default-value" name="myInput" id="myInput" />
</div>
</body>
</html>
最佳答案
您只需在触发输入的 blur 处理程序之前清空该值:
open: function () {
$('#myInput').val('').blur();
}
否则，调用 .blur() 并没有真正的帮助，因为 $.trim(this.value) == '' 将是错误的。
为了使您的代码可重复用于具有多个输入的多个对话框，您可以使用类 + 上下文选择器而不是 ID 选择器:
$('.default-value', this).val('').blur();
关于javascript - 带对话框的默认输入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15188874/