Как очистить переключаемое текстовое поле, которое имеет фокус на смену флажка? - PullRequest
Новая
       5

Как очистить переключаемое текстовое поле, которое имеет фокус на смену флажка?

1 голос
/ 17 апреля 2019

У меня есть это https://jsfiddle.net/5ep34nj8/5/, и функция переключения отлично работает.

Кроме того, я хотел бы очистить переключенное текстовое поле, когда флажок не установлен.Я искал около часа безрезультатно.

Я попытался убрать фокус на текстовом поле, и это ничего не изменило.Текстовое поле не опустеет само по себе, как сейчас. 

function toggleOtherLanguagesTextBox() {
  var effect = 'slide';
  $("#otherLanguagesPartial").toggle(effect, 0);
}

$("#otherLanguagesPartial").toggle(false);
$("#other").click(function() {
  toggleOtherLanguagesTextBox();

  if (!$("#other").is(":checked")) {
    $("#otherLanguages").focus(false);
    $("#otherLanguagesPartial").val("");
  }

  if ($("#other").is(":checked"))
    $("#otherLanguages").focus();
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>

<body>
  <input type="checkbox" id="other" name="languages[]" value="Other" />
  <label for="other">Other</label>
  <div id="otherLanguagesPartial">
    <label for="otherLanguages">Please Specify:</label>
    <input type="text" id="otherLanguages" name="languages[]">
  </div>
</body>

<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</footer>

1 Ответ

2 голосов
/ 17 апреля 2019

В настоящее время вы пытаетесь очистить div вместо input.Поэтому используйте $("#otherLanguages").val(""); вместо $("#otherLanguagesPartial").val(""); в своем методе щелчка.

См. Фрагмент ниже: 

function toggleOtherLanguagesTextBox() {
  var effect = 'slide';
  $("#otherLanguagesPartial").toggle(effect, 0);
}

$("#otherLanguagesPartial").toggle(false);
$("#other").click(function() {
  toggleOtherLanguagesTextBox();

  if (!$("#other").is(":checked")) {
    $("#otherLanguages").focus(false);
    $("#otherLanguages").val("");
  }

  if ($("#other").is(":checked"))
    $("#otherLanguages").focus();
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>

<body>
  <input type="checkbox" id="other" name="languages[]" value="Other" />
  <label for="other">Other</label>
  <div id="otherLanguagesPartial">
    <label for="otherLanguages">Please Specify:</label>
    <input type="text" id="otherLanguages" name="languages[]">
  </div>
</body>

<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...