Question

我有复选框和输入文字，仅在选中复选框时，才需要将输入字符转为大写。

因此，如果未选中复选框，而我键入“ aa”，则选中复选框并键入“ bb”，结果应为：“ aaBB”

我有此代码，但这是不正确的，因为当选中复选框时，它将整个输入值转换为大写。

$Global:state = $null

function setState {
  param(
    [string]$s
  )
  $Global:state = $s
}

function getState {
  return $Global:state
}

setState ("foo")

getState

$(document).ready(function() {
  $('input').keyup(function() {
    if ($("#ch").is(":checked")) {
      this.value = this.value.toLocaleUpperCase();
    }
  });
});

http://jsfiddle.net/tqa8p9ub/

Answer 1

您可以使用keypress事件对普通JavaScript进行此操作，并根据复选框状态将大写或不大写的字符添加到当前输入值。

使用keypress事件比使用keyup更可取，因为您可以在将密钥添加到输入之前对其进行拦截，这使您可以转换或不转换它，甚至丢弃它。但是，使用keyup会强制您更改整个输入值，因为该值已经被添加到输入中。在这种情况下，您可能还会看到一个小的闪烁。

此外，您还必须通过调用event.preventDefault()来阻止事件完成执行，否则字符将被两次添加到输入中。

您还需要使用input.selectionStart在正确的位置插入字符。插入后，您必须同时递增input.selectionStart和input.selectionEnd，请参阅this answer for more details。

const checkbox = document.querySelector('#ch');
const input = document.querySelector('#myinp');

input.addEventListener('keypress', event => {
  const checked = checkbox.checked;
  const char = checkbox.checked ? event.key.toLocaleUpperCase() : event.key;
  const pos = input.selectionStart || 0;
  input.value = input.value.slice(0, pos) + char + input.value.slice(pos);
  input.selectionStart = pos + 1;
  input.selectionEnd = pos + 1;
  event.preventDefault();
});

<input type="checkbox" id="ch" />
<input type="text" id="myinp" />

Answer 2

尝试一下-

$(document).ready(function() {
    $('input').keyup(function(e) {
        if ($("#ch").is(":checked")) {
          let lastChar = e.key;
          lastChar = lastChar.toUpperCase();
          this.value = this.value.substr(0, this.value.length - 1) + lastChar;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="ch" />
<input type="text" id="myinp" />

现场直播-https://jsitor.com/Q0aigCO1j

仅在选中复选框的情况下，将输入文本变为大写

2 个答案: