一个元素的 jQuery onfocus 有另一个元素可点击-6ren

一个元素的 jQuery onfocus 有另一个元素可点击

转载作者：行者123 更新时间：2023-11-28 08:58:08

我正在尝试制作一个带有相邻下拉列表的输入字段，其想法是输入字段可以接受用户输入的文本或从下拉列表中选择的值。为了使事情尽可能简单，我使用样式在输入具有 focus 时排队，然后显示下拉列表。问题在于，当单击某个元素时，输入失去焦点并且下拉列表消失，从而无法检测到单击操作。

有没有简单的方法解决这个问题？理想情况下，我想让事情保持原样我想知道是否有不同的方式可以听取点击以填充表单字段？代码如下:

<!doctype html>
<html>
<head>
<title>jQuery editable select</title>

<link rel="stylesheet" href="css/bootstrap.min.css" />

<style>
.wrap { width: 1024px; margin: 0 auto; }
    .left { width: 600px; float: left; }
    .right { width: 400px; float: right; }

.editable-select-wrap {}
    .editable-input {}
        .editable-input:focus + .editable-drop { display: block; }
    .editable-drop { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; display: none; }
        .editable-drop.focus { display: block; }
        .editable-drop li { display: block; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
            .editable-drop li:last-child { border-bottom: none; }
</style>

</head>
<body>

<div class="wrap">

    <div class="left">

        <span class="editable-select" data-name="phone" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>
    <div class="right">

        <span class="editable-select" data-name="message" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
( function ( $ ) {

    $.fn.editableSelect = function( options ) {

        /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    Configuration Settings    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
        var config = $.extend({
            bootstrap: false,
            classDefault : 'editable-input',
            classbootstrap: 'form-control'
        }, options );

        var html = classes = '', json;

        if( config.bootstrap ) {
            classes = config.classbootstrap +' '+ config.classDefault;
        } else {
            classes = config.classDefault;
        }

        $( this ).each( function() {

            html = '';

            html = '<div class="editable-select-wrap">';
                html += '<input type="text" name="'+ $( this ).data('name') +'" class="'+ classes +'" />';
                html += '<ul class="editable-drop">';

            json = $( this ).data('options' );

            $( json ).each( function() {
                html += '<li data-value="'+ this.val +'">'+ this.text +'</li>';
            });

            html += '</ul></div>';

            $( this ).html( html );
        });

        var parent;

        $('body').on('click', '.editable-drop li', function() {
console.log( 'fire' );
            parent = $( this ).parent();

            parent.siblings('input').val( $( this ).text() );

            parent.css('display', 'none');

        });

    };

}) ( jQuery );

$('.editable-select').editableSelect({ bootstrap: true });
</script>

</body>
</html>

如有任何建议，我们将不胜感激!!!

这是代码的 fiddle ，我删除了引导 Assets :

http://jsfiddle.net/godoploid/m6sdgyr1/1/

最佳答案

我通过向 editable-drop 添加 hover 找到了解决此问题的方法

.editable-drop:hover {
    display:block;
}

工作 JSFiddle:http://jsfiddle.net/xL1kbfne/1/

或下面的代码片段:

( function ( $ ) {

    $.fn.editableSelect = function( options ) {

        /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    Configuration Settings    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
        var config = $.extend({
            bootstrap: false,
            classDefault : 'editable-input',
            classbootstrap: 'form-control'
        }, options );

        var html = classes = '', json;

        if( config.bootstrap ) {
            classes = config.classbootstrap +' '+ config.classDefault;
        } else {
            classes = config.classDefault;
        }

        $( this ).each( function() {

            html = '';

            html = '<div class="editable-select-wrap">';
                html += '<input type="text" name="'+ $( this ).data('name') +'" class="'+ classes +'" />';
                html += '<ul class="editable-drop">';

            json = $( this ).data('options' );

            $( json ).each( function() {
                html += '<li data-value="'+ this.val +'">'+ this.text +'</li>';
            });

            html += '</ul></div>';

            $( this ).html( html );
        });

        var parent;

        $('body').on('click', '.editable-drop li', function() {
console.log( 'fire' );
            parent = $( this ).parent();

            parent.siblings('input').val( $( this ).text() );

            parent.css('display', 'none');

        });

    };

}) ( jQuery );

$('.editable-select').editableSelect({ bootstrap: true });

.wrap { width: 1024px; margin: 0 auto; }
    .left { width: 600px; float: left; }
    .right { width: 400px; float: right; }

.editable-select-wrap {}
    .editable-input {}
        .editable-input:focus + .editable-drop { display: block; }
    .editable-drop { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; display: none; }
        .editable-drop.focus { display: block; }
        .editable-drop li { display: block; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
            .editable-drop li:last-child { border-bottom: none; }

    .editable-drop:hover {
        display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

    <div class="left">

        <span class="editable-select" data-name="phone" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>
    <div class="right">

        <span class="editable-select" data-name="message" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

关于一个元素的 jQuery onfocus 有另一个元素可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27048570/

文章推荐： javascript - Kineticjs 到小图像

文章推荐： swift - 减少 swift UIView 中的冗余

文章推荐： javascript - HTML 表单回发并下载文件时显示进度掩码

文章推荐： css - jQuery UI 可拖动在 IE7 中无法正常工作。适用于 IE8

javascript - browser.onfocus() aka window.onfocus() 适用于所有浏览器选项卡
有没有什么办法，如果您在同一页面上有 2 个或更多打开的选项卡，当您聚焦一个选项卡时，所有其他选项卡将立即收到“focus()”通知？我以 Facebook Chat 为例。如果您收到新消息，所有选
javascript 事件、onfocus
现在我正在更改 onfocus(onclick 等) 事件的默认行为，如下所示: function my(e){ e.style.backgroundColor = "red";//her
javascript - Onfocus 文本框用户名放入文本框名字值和文本框姓氏值分割
一开始我有输入字段，它与 jquery 代码配合得很好，现在我将输入字段更改为 asp.net 文本框，因为我进行了扩展，因此它将数据插入数据库中。所以现在我需要弄清楚它如何与 asp:textbox
jQuery onfocus onblur问题
我在使 onFocus 和 onBlur 事件正常工作时遇到一些问题这是我得到的 var var1 $("input").focus(function() { var1 = $(this).va
javascript - 更改父类 onfocus
我有一个字段，我想在其中选择一个输入框来更改字段的背景颜色。我尝试通过一个简单的 onfocus 操作更改输入父级的 html 类，即字段，但我没有看到任何反应。我有以下内容，并仔细检查了类名。在
javascript - onFocus 时扩展文本区域
我有很多文本区域文件，我希望它们在聚焦时全部展开这是我的代码演示:http://jsfiddle.net/PU73y/ 问题是当我点击它们时它们不会展开。这是为什么？谢谢 this is test
javascript - 选择文本时不要触发 onfocus？
我正在编写一个 JavaScript 聊天应用程序，但我遇到了一个小问题。这是 HTML 结构: 当用户点击/聚焦聊天框时，我希望文本框自动聚焦。我在聊天框上有这个 onfo
jquery - onfocus 从文本区域中删除文本
我在谷歌上寻找一种方法来删除焦点文本，但无法弄清楚如果字段中没有输入任何内容，我们如何将其添加回去。这就是我目前所拥有的... onfocus="if(this.value == 'Name*')
javascript - onFocus 在模式弹出后停止触发
我使用 onfocus 事件处理程序来做几件事。它在初始页面加载后效果很好。但是，在我单击打开模式弹出窗口的链接后，onfocus 事件停止工作。焦点仍然可以正常工作...但是 onfocus 事件永
javascript - "onfocus"事件不适用于动态附加的输入
当我动态附加输入时，onfocus 函数不起作用。我的代码 $i=1; )"> 我的功能是 function myFun(val){ alert(val); } 最佳答
javascript - onfocus 下拉菜单需要双击才能显示菜单
在使用 Internet explorer 的页面上，我有一个下拉菜单，但在第一次加载页面时，因为它上面有一个 onFocus，所以需要双击才能打开显示菜单。如何避免双击。 onFocus 仍必须触发
javascript - onfocus 关闭图标应显示在右侧
我做了 float 文本输入，当用户专注于输入时，我的文本会 float ，但当用户点击我的输入时，我的输入中也需要一个“关闭 x”图标。 To include "x cloase" icon I w
javascript - onFocus 不会触发显示和隐藏列表项
知道我的代码有什么问题吗？我的 onFocus 事件在 div 上不起作用 class Hello extends React.Component { state = { openDrop
jquery - 发光按钮 onfocus
我希望按钮在通过 tab 键选择时具有发光效果。谁能帮我这个。代码片段将非常有帮助。谢谢拉什米最佳答案如果您正在为现代浏览器开发，您可以使用 html5 框阴影和过渡: button{ bac
html onfocus 选项卡与页面加载
假设我有一个文本框的 onFocus 事件。正如预期的那样，当用户跳入该框时会触发该事件。但它似乎也像选择框时触发事件，然后通过切换选项卡，打开然后关闭另一个应用程序等覆盖然后打开窗口。有没有办法使事
javascript - 全局onBlur/onFocus
与其他人一样，我们的网络应用程序中到处都有表单。到目前为止，我们一直在大多数表单元素中使用以下(或一些变体): class="formThingy" onFocus="document.the
jquery - 将阴影添加到文本框 onFocus
我想在我的注册表单上制作这种 Pinterest 效果 - 当用户关注输入文本字段或文本区域时，我希望该字段或区域周围有柔和的阴影，如下所示: 所以我尝试了以下 - 我写了一个 CSS 类 .inpu
Javascript onFocus 在页面加载时触发
Fiddle 所以我遇到了这个问题。我有一个简单的表格: 还有这个脚本: function focus(element) { console.log('focused ' + el
html - onfocus 用于表单输入以更改边框颜色？
我正在尝试在用户单击字段时向表单字段添加颜色边框，我擅长 html 和 javascript，还有一点 php，但我的 css 实际上很差。表单等的代码如下。如果有人可以指导或帮助我，我将不胜感激。代
android - RecyclerView onFocus 事件
我正在使用带有 LinearLayoutManager 的 RecyclerView 来填充对象的 ArrayList。我需要的是当我将焦点从一个项目切换到另一个项目时，如何实现 onFocus 事件

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

一个元素的 jQuery onfocus 有另一个元素可点击