Question

我正在尝试在输入事件时将用户输入转换为大写

因此，每当我在输入字段中输入键时，我都会遇到以下问题

当用户在中间输入内容时，光标跳到输入值的末尾。
最后键入的字符（不是最后一个字符）没有转换为大写。

这是JS小提琴https://jsfiddle.net/aeL051od/的链接，用于重现该问题

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
	<div class="nav-menu">
	<ul>
		<a href="#"><img src="img/logo.jpg" style="width:50px"></a>
		<a href="index.html"><img src="img/logo.jpg" style="width:50px"></a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Games</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Crews</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>






  <li><a href="#">Jobs</a></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Events</a></li>
  <li><a href="#">News</a></li>
  
</li>
  <li class="social">
  	<a href="#">Sign In</a>
  	<a href="#" style="color:#ff0000">Sign Up</a>
  	<a href="#"><i class="fas fa-search"></i></a>
  <button onclick="myFunction()" class="infobtn"><i class="fas fa-user"></i></button>
  <div id="information" class="info-content">
    <a href="#">Legal</a>
    <a href="#">Privacy</a>
    <a href="#">Support</a>
    <a href="#">Cookies</a>
    <hr>
    	
    </hr>
<div class="language-selector">
<select>
	<option value="en-US">English</option>
	<option value="de-DE">Deutsch</option>
	<option value="es-ES">Español</option>
	<option value="es-MX">Español Latinoamérica</option>
	<option value="fr-FR">Français</option>
	<option value="it-IT">Italiano</option>
	<option value="ja-JP">日本語</option>
	<option value="ko-KR">한국어</option>
	<option value="pl-PL">Polski</option>
	<option value="pt-BR">Português do Brasil</option>
	<option value="ru-RU">Русский</option>
	<option value="zh-TW">繁體中文</option>
	<option value="zh-CN">简体中文</option>
</select>
    <div class="globe"></div>
  </li>
</ul>

FOR %A IN (1 2 3 4 5) DO java -cp bin examples.generators.SimpleCircuitGenerator

Answer 1

{{ event ? event.target.value : null }}在这里显示目标值。

您必须显示转换后的input值。如下所示

 <div id="app">
      <input type="text" v-model="input" @input="handleInput">
      <p>{{ input }}</p>
    </div>

对于“光标跳转”问题，获取光标在开始时的位置，然后在更新值后将光标设置回起始位置

  handleInput(e) {
          var start = e.target.selectionStart;
            this.input = this.input.toUpperCase()
          this.$nextTick(()=>{
                  e.target.selectionStart = e.target.selectionEnd = start;
                    })
        }

提琴：https://jsfiddle.net/r53ecug6/

Answer 2

如果您（或Vue）将新值复制到输入中，则光标将设置在输入的末尾。如果您想保留以前的职位，则需要捕获该职位，进行更改，然后在$nextTick上恢复该职位。

还要注意，如果要在处理程序中设置this.input，那么使用v-model也没有意义。保存event也不太明智，但是您可以。

new Vue({
  el: "#app",
  data() {
    return {
      input: null,
      event: null
    }
  },
  methods: {
    handleInput(e) {
      const el = e.target;
      const sel = el.selectionStart;
      const upperValue = el.value.toUpperCase();

      el.value = this.input = upperValue;
      this.event = e;
      this.$nextTick(() => {
        el.setSelectionRange(sel, sel);
      });
    }
  }
});

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" @input="handleInput">
  <p>{{ event ? event.target.value : null }}</p>
  <p>
    {{input}}
  </p>
</div>

Answer 3

我能够解决您的问题，但是您需要在代码

中引入一个新变量

HTML：

<div id="app">
   <input type="text" v-model="input" @input="handleInput">
   <p>{{ updated_value }}</p>
</div>

JS：

new Vue({
   el: "#app",
   data() {
       return {
           input: null,
           updated_value: null
       }
   },
   methods: {
       handleInput(e) {
           this.input = e.target.value;
           this.updated_value = e.target.value ? e.target.value.toString().toUpperCase() 
         : e.target.value;
       }
   }
});

Link to fiddle

摘要：
1）使用新变量（updated_value）存储输入的大写版本，并将其用作<p>的值
2）这样可以确保输入值不会被更新，从而不会导致光标跳转的问题

输入事件时，输入光标跳至输入字段的末尾

3 个答案: