帮助集中动态创建的输入

2024-03-27

我的代码是这样的。在jsfiddle http://jsfiddle.net/KH7pZ/1/.

var inp = $('<input>').attr({'class':'txtEdit txt', 
    'type':'text'})
    .val($(this).html()).blur(function (){
        if($(this).val().length != ''){
            $(txt).replaceWith($(editable)
                .html($(this).val()));
        }
        else{ alert("Cannot contain empty value!")}
    }).keydown(function (e){
            if(e.keyCode == 13 || e.keyCode == 9){
                e.preventDefault();
                $(this).trigger('blur');
            }
    }).appendTo($(txt));

我正在创建一个包含大量事件的输入元素并将其添加到 div 中。现在我想在它附加到 DOM 时将其聚焦。但焦点似乎不起作用。

这是总代码。

<html>
    <head>
        <title>My jQuery plugin</title>
        <script src="jquery.js"></script>
        <script>
            $(function ()
            {
                    $('.editable').txtEdit();
            });

            (function($){
                $.fn.txtEdit = function() {
                    var editable = $(this);

                    $(editable).live('click', 
                        function ()
                        {
                            var txt = $('<div>').attr('class', 'txtEdit div');
                            var inp = $('<input>').attr({'class':'txtEdit txt', 
                                            'type':'text'})
                                        .val($(this).html()).blur(function (){
                                                if($(this).val().length != ''){
                                                    $(txt).replaceWith($(editable)
                                                        .html($(this).val()));
                                                }
                                                else{ alert("Cannot contain empty value!")}
                                            }).keydown(function (e){
                                                    if(e.keyCode == 13 || e.keyCode == 9){
                                                        e.preventDefault();
                                                        $(this).trigger('blur');
                                                    }
                                            }).appendTo($(txt));
                            $(this).replaceWith(txt);                           
                        }
                    );
                };
            })(jQuery);
        </script>
    </head>
    <body>
        <div class="editable">this is editable div</div>
    </body>
</html>

有人有什么想法吗?

Regards,


add

inp.focus();

after

$(this).replaceWith(txt);

因为你的 div 是在焦点操作之后创建的,这是错误的。 您应该显示 div,然后专注于输入。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

帮助集中动态创建的输入 的相关文章

  • Javascript/jQuery 变量未给出预期值

    和我之前的其他人一样 我也在 Javascript 的范围内苦苦挣扎 那并试图阅读该死的东西 我已经检查了关于这个问题的一些先前的线程 但我似乎无法让它们正确地应用于我的问题 在下面的示例中 我想操纵中的值tagsArr数组 一旦数组已完全
  • 如何让我的“点击”功能与 iOS 配合使用

    我有一组充当按钮的 Div 这些按钮有一个简单的 jquery click 函数 该函数适用于除 iOS 之外的所有浏览器 例如 div class button click me div and button click function
  • 如何用方向键移动div

    我想使用 jQuery 用箭头键移动 div 所以右 左 下 上 找到了我想要完成的演示here http atomicrobotdesign com blog htmlcss move objects around the canvas
  • 启动 jQuery UI 选项卡,没有选项卡处于活动状态且所有面板都隐藏

    我在用着jQuery UI 选项卡 http jqueryui com tabs 在一个项目中 我想知道是否有一种简单的方法可以在文档加载时隐藏所有面板 直到单击选项卡为止 默认情况下 jQuery UI 以激活的选项卡和可见的相应面板开始
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • jQuery .nothas?

    有没有办法做相当于 nothas jQuery 中的选择器 例如 如果我想添加一个TBODY to all TABLE如果元素还没有 那么最好做这样的事情 TABLE nothas TBODY append tbody tbody 如果这可
  • jQuery 更改为隐藏字段后触发重力表单中的表单更新

    简而言之 是否有 JavaScript 函数或挂钩来触发重力形式的更新 以便执行条件逻辑 原问题 我正在使用重力形式 并且创建了一个 变化时 事件 gform 1 find gfield date dropdown month select
  • asp.net mvc - Ajax 刷新视图的每个元素

    希望在退出 jquery 对话框后使用 ajax 刷新当前页面 我有一个包含 foreach 循环的视图 数据是从模型中提取的 每个循环有 2 个编辑 删除按钮 当我单击 编辑按钮 时 将打开一个 jquery UI 对话框进行编辑 当我保
  • 动态添加 href 到链接

    我有一系列水平 div 框 我需要添加相关的 href 以使用锚链接链接到下一个 由于它们是动态生成的 我需要使用 JavaScript 添加 href 期望的效果将是 div a class next video href post2 N
  • jqgrid editoptions:必需的不起作用

    好吧 不确定我在这里做错了什么 list jqGrid url URL datatype json mtype GET colModel label Index index Index key true hidden true label
  • jQuery:如何检查一个元素是否是最后一个同级元素?

    如何检查一个元素是否是最后一个兄弟元素 对于连续的最后一个单元格 我想执行不同的操作 这不起作用 td each function var this this if this this parent last td alert 123 如果
  • jquery 查找下一个带有类的元素

    我试图找到下一个具有 错误 类别的元素并碰壁 在查看 jQuery 网站上的演示时 这应该可以工作 但事实并非如此 button disabled next text this button is disabled div div
  • jquery 动态 iframe - !document.write 和 IE 问题

    为什么这在所有浏览器中都有效 除了 IE var iframe var doc iframe contents doc find head append 但是 如果我在 document write 中使用非 jquery 对象 它在 IE
  • 音频标签的 Html5 惰性“onplay”事件处理程序?

    使用新的 Html5 音频标签 onplay 事件似乎仅在第一次播放音频时触发 在此示例中 当单击 播放 时 音频将开始并显示一个显示 正在播放 的警报弹出窗口 当音频结束并再次单击 播放 时 音频会再次开始 但不会触发警报 我在这里错过了
  • 从 JavaScript 重新启动动画 GIF,无需重新加载图像

    我正在使用动画 GIF 创建动画幻灯片 我正在从一个动画淡入淡出到下一个动画 问题是 我发现确保 GIF 从第一帧开始动画的唯一方法是每次显示时重新加载它 每个 GIF 大约 200KB 这对于连续幻灯片播放来说带宽太大了 这是我当前的代码
  • 从三行菜单到十字菜单的动画变换

    我有一个三行动画菜单 当您单击它时 它会切换为十字 首先 您会看到三条线变成一条线 然后切换到十字线 但我想跳过从三行到一行的步骤 我怎样才能做到这一点 这是小提琴http jsfiddle net adyocsm9 http jsfidd
  • 使用ajax发送表单数据

    我想用 ajax 以表单形式发送所有输入 我有一个这样的表单
  • 为什么人们将自己的自定义/用户函数添加到 jQuery 对象中? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我见过人们将自己的自定义 用户功能添加到jQuery目的 例如 myUserFunc function regular JS code 你为什么
  • Woocommerce 中的 Ajaxify 标头购物车项目计数

    我正在为 WordPress 创建一个自定义 woocommerce 集成主题 我在顶部有一个 blob 显示购物车中的商品总数 我想使用 Jquery 更新此 blob 无需重新加载页面 我能够通过获取购物车中的当前数量来增加商品数量bl
  • 更改 jQuery UI 选项卡的选定选项卡

    这个问题之前已经被问过几次了 但没有一个与我的情况相似 我有 jQuery Tabs 控件 可以通过 ajax 加载我的选项卡 div ul li a href gt Information a li ul div

随机推荐