input 相关问题

我使用以下代码将输入值更改为大写：函数大写（z）{ v = z.value.toUpperCase(); z.值=v； } 我使用以下代码将输入值更改为大写： <script> function uppercase(z){ v = z.value.toUpperCase(); z.value = v; } </script> <input type="text" id="example" onkeyup="uppercase(this)"> 问题是，当我在文本中间输入某些内容时，光标会跳到文本的末尾。在谷歌上搜索我尝试遵循代码，但它根本不起作用： function uppercase(z){ document.getElementById(z).addEventListener('input', function (e) { var target = e.target, position = target.selectionStart; // Capture initial position target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move. v = z.value.toUpperCase(); z.value = v; target.selectionEnd = position; // Set the cursor back to the initial position. }); } 第一个代码工作正常，但我仍然不知道如何防止光标跳跃。您还可以在 keyup 上设置光标位置（或者您正在使用的任何内容，只要您获得对输入元素的引用） function withSelectionRange() { const elem = document.getElementById('working'); // get start position and end position, in case of an selection these values // will be different const startPos = elem.selectionStart; const endPos = elem.selectionEnd; elem.value = elem.value.toUpperCase(); elem.setSelectionRange(startPos, endPos); } function withoutSelectionRange() { const elem = document.getElementById('notWorking'); elem.value = elem.value.toUpperCase(); } <div style="display: flex; flex-direction: column"> <label for='working'>Uppercase text with selection range</label> <input id='working' type='text' onkeyup="withSelectionRange()"></input> <label for='notWorking'>Uppercase text input without selection range</label> <input id='notWorking' type='text' onkeyup="withoutSelectionRange()"></input> </div> 代码笔链接您只需添加一些 CSS 样式即可实现此目的： #example { text-transform: uppercase; } 这将使输入字段中的所有字母显示为大写，但值仍然相同。如果您需要将该值设置为大写，请在需要时将其转换为大写（例如在提交之前）我一直在寻找同一问题的解决方案。添加 CSS 对我来说很有效，除了有一个特定要求，即我们的后端 api 只接受大写字符串。所以除此之外： #example { text-transform: uppercase; } 我还添加了监听 onBlur 和 keydown.enter 的回调，并在触发这些事件时将输入值转换为大写。附：没有示例代码，因为我只是向那些有同样头痛并且不想破解 HTMLInputElement.setSelectionRange. 的人分享我的想法最好的方法是在新文件中创建指令 import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Directive, ElementRef, HostListener, Renderer2, forwardRef, } from '@angular/core'; @Directive({ selector: 'input[toUppercase]', providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => UpperCaseInputDirective), }, ], }) export class UpperCaseInputDirective extends DefaultValueAccessor { @HostListener('keyup', ['$event']) input($event: InputEvent) {//keyup yesssss sa const target = $event.target as HTMLInputElement; const start = target.selectionStart; target.value = target.value.toUpperCase(); target.setSelectionRange(start, start); this.onChange(target.value); } constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef, false); } } 在app.module.ts中 @NgModule({ declarations: [ UpperCaseInputDirective, 在你的 html 组件中 <input toUppercase>

javascript input uppercase

回答 4 投票 0

input 相关问题

最新问题