Я хочу, чтобы текстовое поле внутри ячейки фокусировалось, когда я нажимаю на белую область ячейки. В то же время также можно отфильтровать, что функция применяется только к ячейкам с классом: "use-keyboard-input".

Благодарность!

        function textareaFocus(){
            $(this).find('textarea').each(function(){
                $(this).focus();
            });
            console.log('test');
        }
table{
  width: 100% !important;
  vertical-align: middle;
  border-spacing:0;
  border-collapse: collapse;
  background-color: white;
}

textarea{ 
  border: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  resize: none;
  outline: none;
  font-size: 1.8vw;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  color: var(--fontDark);
  background-color: red;
}

.routeTable td{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
  vertical-align: middle;
}

.routeTable th{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
}

.routeTable tr{
  border: 1px solid black;
  font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
  <tbody style="border: none;">
      <tr style=" height: 10em;"><td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td><td onclick="textareaFocus();" colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left;  padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td><td  onclick="textareaFocus(); colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td><td  onclick="textareaFocus(); colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left;  padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
      </tr> 
        </tbody>
</table>
0
Patrick Gottberg 9 Окт 2021 в 12:42

2 ответа

Лучший ответ

Ответ @Ali правильный, вы также можете сделать это немного более абстрактным способом.

$('textarea').on('focus', function() {
  console.log('textarea focused');
});

$('textarea').parent('td').on('click', function() {
  console.log('cell clicked');
  
  $(this).find('textarea:first-child').focus();
})
        
table{
  width: 100% !important;
  vertical-align: middle;
  border-spacing:0;
  border-collapse: collapse;
  background-color: white;
}

textarea{ 
  border: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  resize: none;
  outline: none;
  font-size: 1.8vw;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  color: var(--fontDark);
  background-color: red;
}

.routeTable td{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
  vertical-align: middle;
}

.routeTable th{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
}

.routeTable tr{
  border: 1px solid black;
  font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
  <tbody style="border: none;">
    <tr style=" height: 10em;">
      <td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td>
      <td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left;  padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
      <td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td>
      <td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
      <td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td>
      <td colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left;  padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
    </tr> 
  </tbody>
</table>
0
decryptingfuture 9 Окт 2021 в 10:06

Вам необходимо передать объект ссылки в функцию, чтобы определить, какая ячейка нажата. Поэтому я обновил функцию до textareaFocus(obj) и передал td, добавив (this) в качестве параметра функции:

function textareaFocus(obj){
    $(obj).find('textarea').focus();
    console.log('test');
}
table{
  width: 100% !important;
  vertical-align: middle;
  border-spacing:0;
  border-collapse: collapse;
  background-color: white;
}

textarea{ 
  border: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  resize: none;
  outline: none;
  font-size: 1.8vw;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  color: var(--fontDark);
  background-color: red;
}

.routeTable td{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
  vertical-align: middle;
}

.routeTable th{
  border: 1px solid black;
  font-size: 1.8vw;
  text-align: center;
}

.routeTable tr{
  border: 1px solid black;
  font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable" style="border: none;">
    <tbody style="border: none;">
        <tr style="height: 10em;">
            <td colspan="3" style="background-color: var(--dark); width: 15%;">Cell-1:</td>
            <td colspan="3" onclick="textareaFocus(this);">
            <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
            <td colspan="2" style="background-color: var(--dark); width: 15%">Cell-2</td>
            <td onclick="textareaFocus(this);" colspan="3">
            <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
            <td colspan="3" style="background-color: var(--dark); width: 15%">Cell-3:</td>
            <td colspan="4" onclick="textareaFocus(this);">
            <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
        </tr>
</table>

Вы также можете сделать это, не вызывая функцию через onclick, но привязав слушателя к элементам td:

$(document).ready(function(){
    $(".use-keyboard-input").click(function(){
        $(this).find("textarea").focus();
    })
})
0
Ali Sheikhpour 9 Окт 2021 в 10:57