data存储数据DEMO 获得光标文本消失

最新推荐文章于 2022-11-19 11:31:28 发布

原创最新推荐文章于 2022-11-19 11:31:28 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

本文介绍了一个使用jQuery实现的输入框自动清空与恢复默认值的功能。通过为输入框添加特定类名并利用jQuery的事件处理机制，在获得焦点时清除预设文本，并在失去焦点且为空时恢复原始提示信息。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.6">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="11/11/2008">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
</head>
<body>

<form id="testform">
    <input class="clear" type="text" value="Always cleared" />
    <input class="clear once" type="text" value="Cleared only once" />
    <input type="text" value="Normal text" />
</form>

<script type="text/javascript">
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
  
$(function() {
    //Go through every input field with clear class using each function
    //(NB! "clear once" is two classes clear and once)
    $('#testform input.clear').each(function(){
        //use the data function to save the data
        $(this).data( "txt", $.trim($(this).val()) );
    }).focus(function(){
        // On focus test for default saved value and if not the same clear it
        if ( $.trim($(this).val()) === $(this).data("txt") ) {
            $(this).val("");
        }
    }).blur(function(){
        // Use blur event to reset default value in field that have class clear
        // but ignore if class once is present
        if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
            //Restore saved data
            $(this).val( $(this).data("txt") );
        }
    });
});  



var input_text = $('#shopping_cart_items input.text');
input_text
    .css('border', '3px dashed yellow')
    .css('background-color', 'red')
    .val("text updated");  
</script>

</body>
</html>