All geek questions in one place

How to save input text deleted by jquery when returning in browser?

I have an error with the following page: http://jsbin.com/agedu/ Source code with comments: http://jsbin.com/agedu/edit

The problem is that when I type something and run a query to display the search results, if I return to the search page in my browser (Firefox 3.5, but this is the same with IE8), there are no more my search queries.

It is replaced by gray text. This gray text that I want to receive only when the text is not filled.

When I delete jQuery code, if I do a search and click the return button in my browser, the filled text is still present.

And even with this example page: http://mucur.name/system/jquery_example/

If I write some text, load another URL into the address bar, and then click the "Back" button, the filled text is still present, while it is not with my code.

So my question is: do you have an idea how to save this text when filling out?

There should be a way to determine if the input is full and avoid replacing the text if that is the case.

This may come from browsers and how they work with JavaScript, but I'm not sure about that.

+3
source share
4 answers

Wow, it took a long time to debug it, I think you should use the val method instead of using the value attribute.

Anyway, the problematic line is

$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus',

, 'value', . , .

, val(), , .

: http://jsbin.com/ihegu/

[ , "" Google "".]

 (function($) { 
    $.fn.inputdynvalue = function(options) 
    { 
        var opts = $.extend({}, 
        $.fn.inputdynvalue.defaults, options); 
        return this.each(function() 
            { 
            var hvalue = opts.htext; 
            switch (opts.htext) 
            { 
                case 'title': 
                    hvalue = $(this).attr('title'); 
                    break; 
                case 'value': 
                    hvalue = $(this).val();
                    break; 
            } 

            //Modify the text value ONLY if it non empty. 
            if($(this).val() === '')
            {
               $(this).val(hvalue);
            }  

            //If title and value is same, apply the grey text class.
            if($(this).val() === this.title)
            {
               $(this).addClass(opts.hclass);
               //Why do you unbind the event?
            };

            $(this).bind('focus', 
            function() { 
                if ($(this).val() === this.title) { 
                    $(this).val('');
                    $(this).removeClass(opts.hclass); 
                } 
            });

            $(this).bind('blur', 
            function() { 
                if ($(this).val() === '') { 
                    $(this).val(this.title);
                    $(this).addClass(opts.hclass); 
                } 
            }); 
        }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
        htext: 'title', 
        hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function() { 
    $("input[type='text']").inputdynvalue(); 
});
+1

inputdynvalue() , .

:

 (function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
            case 'title':
                hvalue = $(this).attr('title');
                break;
            case 'value':
                hvalue = $(this).attr('value');
                break;
            }
            if (this.value === '') {
              $(this).attr('value', hvalue).addClass(opts.hclass)
            }
            $(this).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };
    $.fn.inputdynvalue.defaults = {
        htext: 'title',
        hclass: 'hint'
    };
})(jQuery);

- :

        if (this.value === '') {
          $(this).attr('value', hvalue).addClass(opts.hclass)
        }

.

http://jsbin.com/ikipi.

0

, , :

        if (this.value === '' || this.value === hvalue){
          $(this).attr('value', hvalue).addClass(opts.hclass);
        }

.

(hvalue) (hclass), '' .

.

0

IE8 FF

.

js , jQuery, .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> 

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/oxeye/edit

-->

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style type="text/css"> 
   .hint { 
    color: #C0C0C0; 
} 
</style> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Test</title>
</head> 
<body> 

<form action="http://www.google.com/search?&q="> 
 <div class="saisie"> 
  <input type="text" id="lr_text" name="q" title="Google" />  
  <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
  <label for="lang_en"><input type="radio" checked="checked" id="lang_en" name="lr" title="English Google" />English</label> 
    <label for="lang_fr"><input id="lang_fr" type="radio" name="lr" title="French Google" />French</label> 
  <label for="lang_de"><input id="lang_de" type="radio" name="lr" title="German Google" />German</label> 
  <label for="lang_es"><input id="lang_es" type="radio" name="lr" title="Spanish Google" />Spanish</label> 

 </div> 
</form> 
<form method="post" action="http://en.wikipedia.org/wiki/Special:Search?search="> 
 <div class="saisie"> 
  <input type="text" id="wikipedia_text" name="champ_wikipedia" title="Wikipedia" /> 
   <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
 <label for="wik_en"><input type="radio" checked="checked" name="wikipedia" id="wik_en" title="English Wikipedia" />English</label> 
  <label for="wik_fr"><input type="radio" name="wikipedia" id="wik_fr" title="French Wikipedia" />French</label> 
 <label for="wik_de"><input type="radio" name="wikipedia" id="wik_de" title="German Wikipedia" />German</label> 
 <label for="wik_es"><input type="radio" name="wikipedia" id="wik_es" title="Spanish Wikipedia" />Spanish</label> 
 </div> 
</form> 

<script type="text/javascript">
    $(document).ready(function() {
        function setText() {
            var kf = this.title.split('|');
            if (kf.length < 0) return;
            if ($('#' + this.name + '_text').hasClass('hint')) {
                $('#' + this.name + '_text').val(kf[0]).addClass('hint');
            }
            $('#' + this.name + '_text').attr('title', kf[0]);
        }

        $("input[type='text']").inputdynvalue();
        $("input[type='radio']").click(setText);
    });

(function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
                case 'title':
                    hvalue = $(this).attr('title');
                    break;
                case 'value':
                    hvalue = $(this).attr('value');
                    break;
            }
            //if value == title change class to 'hint'
            if ($(this).attr('value') == $(this).attr('title')) {
                $(this).addClass(opts.hclass);
            }
            $(this).attr('value', hvalue).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };

    $.fn.inputdynvalue.defaults = {
        htext: 'value', //changed to value
        hclass: 'hint'
    };
})(jQuery);
$(document).ready(function() {
    //Set hint
    $("input[type='text']").blur();
});
</script>
<script type="text/javascript">
                 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-1656750-13");
    pageTracker._trackPageview();
</script></body></html>
0

Source: https://habr.com/ru/post/1712523/

More articles:


All Articles