本文介绍了单击输入而不重新加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Input box hint</title>
<style type="text/css" media="screen">
body {
font-family: Verdana, sans-serif;
font-size: 1em;
}
input {
font-family: Verdana, sans-serif;
font-size: 0.9em;
padding: 5px;
border: 2px solid #666;
}
input.blur {
color: #999;
}
</style>
<script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
<%-- <script type="text/javascript" src="js/jqueryHint.js"></script>--%>
<script>
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}
return this.each(function () {
// get jQuery version of 'this'
var $input = $(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = $(this.form),
$win = $(window);
function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};
})(jQuery);
</script>
<script type="text/javascript" charset="utf-8">
$(function () {
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
</script>
</head>
<body>
<form action="">
<div><label for="search">Search:</label>
<input type="text" name="seach" value="" id="search" title="by name or ticker" />
<input type="submit" value="Go" />
</div>
</form>
</body>
</html>推荐答案
这篇关于单击输入而不重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！