jQuery不使用键盘导航选择文本

Posted 2023-03-03

【中文标题】jQuery不使用键盘导航选择文本

【英文标题】：jQuery not selecting text with keyboard navigation

【发布时间】：2018-09-10 23:15:12

【问题描述】：

我有一个分数表，其中显示了许多学生的许多分数。当教师浏览表格时，程序应选择字段中的文本，以便教师可以更改分数，而不必删除之前的值。

这是我目前的咖啡脚本：

$("input:text").focus ->
    $(this).select()

if $('#scoreTable').length > 0
    document.getElementById("r0c0").focus()

    $(".some_cell").keydown (e) ->
        if e.which == 38
            next_row = parseInt($(this).attr("cell_row")) - 1
            next_col = parseInt($(this).attr("cell_col"))

        else if e.which == 40
            next_row = parseInt($(this).attr("cell_row")) + 1
            next_col = parseInt($(this).attr("cell_col"))

        else if e.which == 37
            next_row = parseInt($(this).attr("cell_row"))
            next_col = parseInt($(this).attr("cell_col")) - 1

        else if e.which == 39
            next_row = parseInt($(this).attr("cell_row"))
            next_col = parseInt($(this).attr("cell_col")) + 1

        $("#r"+next_row+"c"+next_col).focus()

初始选择命令在页面加载时正常工作。但是当我用箭头键跳转到另一个单元格时，光标会放在文本之后。没有选择任何内容。

这里是创建表格的嵌入式 ruby​​ html：

<div>
    <table class="table-borderless scoreTable" id="scoreTable">
      <thead class="table-borderless">
        <th class="table-borderless">Student</th>
        <% @objectives.each_with_index do |objective, index| %>
          <th class="rotate table-borderless"><div><span>
            <%= link_to objective.short_name, edit_objective_path(objective) %>
          </span></div></th>
        <% end %>
      </thead>
      <tbody>
        <% @students.each_with_index do |student, indexx| %>
          <tr>
            <td><h4><%= link_to student.last_name_first, edit_teaching_requests_student_url(student) %> </h4></td>
            <% this_ss = student.seminar_students.find_by(:seminar_id => @seminar.id) %>
            <% @objectives.each_with_index do |objective, indexy| %>
              <% this_score = @scores.find_by(:objective => objective, :user => student) %>
              <td class="themScores to_unhide score_cell">
                <% if this_score %>
                  <%= text_field "scores[#this_score.id]", "", :class => "some_cell", :value => this_score.points,
                    :id => "r#indexxc#indexy", :cell_row => indexx, :cell_col => indexy %>
                <% end %>
              </td>
            <% end %>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

我尝试将这一行添加到咖啡脚本中：

$("#r"+next_row+"c"+next_col).select()

我已经尝试修改来自这个问题Looking for a better workaround to Chrome select on focus bug 的建议，我认为它会像这样翻译成咖啡脚本：

$("#r"+next_row+"c"+next_col).select().mouseup (e) ->
    e.preventDefault()
    $(this).unbind("mouseup")

提前感谢您提供任何见解。

【问题讨论】：

是否可以在您尝试选择文本的地方显示部分 html 代码？

当然！我编辑了问题以包含嵌入式 ruby​​ html。

尝试改变焦点 $("input:text").focus -> 点击函数 $("input:text").click -> 并在点击函数中使用 $(this)。选择（）; .

这适用于在用鼠标单击时选择文本。所以我很高兴我做到了。但是用键盘跳单元格没有任何区别。

【参考方案1】：

我在继续浏览其他问题时发现了这个 sn-p。它完成了这项工作。

        $("#r"+next_row+"c"+next_col).focus()
        callback = -> 
            $("#r"+next_row+"c"+next_col).select()
        setTimeout callback, 10

归功于how to write setTimeout with params by Coffeescript