草庐IT

关于 javascript：仅当活动文本字段已填满时，才将文本字段的光标从活动的一个移动到新附加的文本字段上按下键盘上的输入键

codeneng 2023-03-28 原文

To move cursor of textfield from active one to newly appended textfield on enter key pressed from keyboard only if active textfield is filled

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table>
<thead>
<th>item</th>
<th>Cost</th>
</thead>
 <tbody id="tbody">
<tr>
    <td>Item 1</td>
    <td>
        <input type="text" class="elm" />
    </td>
</tr>


</tbody>
<tfoot>
<tr>
    <td>Total</td>
    <td>
        <label id="total">0</label>
    </td>
</tr>
</tfoot>

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
if (e.keyCode != 13) {
    var sum = 0;
    $('.elm').each(function() {
        if($(this).val() != '' && !isNaN($(this).val())){
            sum += parseInt($(this).val());
        }
    });

    $('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr');
if($itemNum.find('input').val().length > 0)
{
    var itemNum = $('#tbody tr').length + 1;
    var newRow = '<tr>'+
        '<td>Item'+itemNum+'</td>'+
        '<td>'+
            '<input type="text" class="elm">'+
        '</td>'+
    '</tr>';
    $('#tbody').append(newRow);
}
}
});

我正在使用上面的代码在用户动态输入时添加数字值，方法是通过在键盘上按 Enter 键附加新的文本字段，而不管用户输入的输入数量如何，并自动计算其输出。通过按 EnterKey ，我应该仅在用户在前一个文本字段中输入值后才附加新的文本字段，并且光标应该自动移动到新的文本字段。
但在我的代码中，它只发生在第一个文本字段中，其他文本字段不同，请帮助我编码我是 javascript 新手。

  • 只需将 last() 添加到 $item num 行

http://jsfiddle.net/72ene5ob/

嘿，您似乎只想检查最后一个输入字段的长度。所以只需将 .last() 添加到您的选择器中： var $itemNum = $(\\'#tbody tr\\').last();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
    console.log(e.keyCode);
if (e.keyCode != 13) {
    console.log('Enter detected');
    var sum = 0;
    $('.elm').each(function() {
        if($(this).val() != '' && !isNaN($(this).val())){
            sum += parseInt($(this).val());
        }
    });

    $('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr').last();

if($itemNum.find('input').val().length > 0)
{
    console.log('should add new input');
    var itemNum = $('#tbody tr').length + 1;
    var newRow = '<tr>'+
        '<td>Item'+itemNum+'</td>'+
        '<td>'+
            '<input type="text" class="elm">'+
        '</td>'+
    '</tr>';
    $('#tbody').append(newRow);
}
}
});

  • 这是不正确的，只是我在没有 .last() 的情况下运行这个 jsfiddle;它对我来说很好。我希望他需要在页面上包含 jquery 脚本文件。
  • 谢谢先生，这就是我两天以来一直想做的事情，最后你帮我做到了。
  • 请解释一下 setTimeout(function(){ $(\\'.elm\\').last().focus();}, 0); 的需要是什么
  • @David Karlsson，如果我想重置为初始，即删除所有附加的文本字段，并且通过按键盘上的删除键只填充初始文本字段，我应该添加什么

我通过在 else 块的最后一行添加以下代码行来扩展 David Karlsson 的答案：

1
     $('#tbody tr:last-child td:last-child input').focus();

随后，新添加的行的输入获得焦点。

小提琴

  • 如果我想通过按键盘上的删除键重置到删除所有附加文本字段的初始位置，只有初始文本字段未填充，我应该添加什么
  • 我想您需要检查键 46(删除)的 keyup 事件，然后使用以下选择器删除除第一行以外的所有内容： $(\\'#tbody tr:not(:first)\\').remove();之后 $(\\'#tbody tr:first-child td:last-child input\\').val(");

填满javascriptspanclassbrhtmljquery

有关关于 javascript：仅当活动文本字段已填满时，才将文本字段的光标从活动的一个移动到新附加的文本字段上按下键盘上的输入键的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  3. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  4. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  5. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  6. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  7. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  10. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

随机推荐