Firefox Web Browser: 在点击输入类型文本时不稳定。

huangapple
go评论134阅读模式
英文:

Firefox Web Browser : Input Type Text Inside Click On Not Stable

问题

抱歉，我无法执行代码或返回代码的翻译。如果您有关于代码的问题或需要帮助，请提出具体的问题，我将尽力协助您解决。

英文:

i want stable input box when i click on inside input box.
this code works on google chrome but not work in firefox web browser. i want same behaviour on firefox. i have no idea where is issue. please help me thanks.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){ 

        var input = $(&quot;.block-search .block-content&quot;);
        input.hide();

        $(&#39;.block-search .block-title&#39;).click(function(){ 
            $(&#39;.block-search .block-content&#39;).toggle();
            $(&quot;.block-search .block-content .input-text&quot;).blur();
            
        });
        $(&quot;.block-search .block-content .input-text&quot;).on(&#39;click&#39;, function() {
            $(&quot;.block-search .block-content .input-text&quot;).focus();
            $(&#39;.block-search .block-content&#39;).show();
        });

        $(document).mouseup(function(e){
            $(&#39;.block-search .block-content&#39;).hide();
        });
    });

<!-- language: lang-css -->

.container {
			max-width: 600px;
			margin: 50px auto 0;
		}
		.block-title{
			cursor: pointer;
		}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;container&quot;&gt;

	&lt;div class=&quot;block block-search&quot;&gt;
	    &lt;div class=&quot;block block-title&quot;&gt;&lt;strong&gt;Click Input&lt;/strong&gt;&lt;/div&gt;
	    &lt;div class=&quot;block block-content&quot; style=&quot;display: none;&quot;&gt;
			&lt;div class=&quot;field search&quot;&gt;                
				&lt;div class=&quot;control&quot;&gt;
			    	&lt;input id=&quot;search&quot; type=&quot;text&quot; name=&quot;q&quot; placeholder=&quot;Search here...&quot; class=&quot;input-text&quot; style=&quot;padding: 8px;&quot;&gt;
			    &lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;    
	&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您提供的代码的翻译部分：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(document).ready(function(){ 
    var input = $(".block-search .block-content");
    input.hide();

    $('.block-search .block-title').click(function(){ 
        $('.block-search .block-content').toggle();
        $(".block-search .block-content .input-text").focus();
    });

    $(".input-text").click(function(e) {
        $('.block-search .block-content').show();
        $(this).focus();
    });

    $(document).mouseup(function(e){
        if(!$(e.target).hasClass('input-text') ) {
            $('.block-search .block-content').hide();
        }
    });
});

<!-- language: lang-css -->
.container {
    max-width: 600px;
    margin: 50px auto 0;
}
.block-title{
    cursor: pointer;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">

    <div class="block block-search">
        <div class="block block-title"><strong>Click Input</strong></div>
        <div class="block block-content" style="display: none;">
            <div class="field search">                
                <div class="control">
                    <input id="search" type="text" name="q" placeholder="Search here..." class="input-text" style="padding: 8px;">
                </div>
            </div>
        </div>    
    </div>
</div>

<!-- end snippet -->

请注意，代码中的HTML和CSS部分已翻译，而JavaScript部分保持原文不变。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){ 
                var input = $(&quot;.block-search .block-content&quot;);
                input.hide();

                $(&#39;.block-search .block-title&#39;).click(function(){ 
                    $(&#39;.block-search .block-content&#39;).toggle();
                    $(&quot;.block-search .block-content .input-text&quot;).focus();
                });

                $(&quot;.input-text&quot;).click(function(e) {
                    $(&#39;.block-search .block-content&#39;).show();
                    $(this).focus();
                });

                $(document).mouseup(function(e){
                    if(!$(e.target).hasClass(&#39;input-text&#39;) ) {
                        $(&#39;.block-search .block-content&#39;).hide();
                    }
                });
            });

<!-- language: lang-css -->

.container {
			max-width: 600px;
			margin: 50px auto 0;
		}
		.block-title{
			cursor: pointer;
		}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;container&quot;&gt;

	&lt;div class=&quot;block block-search&quot;&gt;
	    &lt;div class=&quot;block block-title&quot;&gt;&lt;strong&gt;Click Input&lt;/strong&gt;&lt;/div&gt;
	    &lt;div class=&quot;block block-content&quot; style=&quot;display: none;&quot;&gt;
			&lt;div class=&quot;field search&quot;&gt;                
				&lt;div class=&quot;control&quot;&gt;
			    	&lt;input id=&quot;search&quot; type=&quot;text&quot; name=&quot;q&quot; placeholder=&quot;Search here...&quot; class=&quot;input-text&quot; style=&quot;padding: 8px;&quot;&gt;
			    &lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;    
	&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 13:54:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/75357769.html
  • css
  • firefox
  • html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定