英文:
KeyPress event handler does not mirror input text as expected
问题
我有一个文本区域和一个段落，在段落中，我会将用户在文本区域中输入的文本镜像显示出来。在段落下方有一个代码格式化工具，当用户在文本区域中的当前行以四个空格或三个反引号开始时，应该显示该工具。我使用键盘按键的事件处理程序来实现此行为。然而，当我在文本区域中输入一个字符时，它不会立即在段落中镜像，直到我再输入另一个字符。我应该怎么做才能让我的JavaScript文件立即获取文本并在预览段落中进行镜像？我尝试过 OnChange，但结果是一样的，字符直到我再输入另一个字符才会被镜像。
文本区域
<textarea onkeypress="duplicate()" class="form-control" rows="10" cols="10" id="text"></textarea>
JavaScript文件
function duplicate() {
//定义代码块部分
let tool = document.getElementById("codeTool");
//获取要镜像的段落
let para = document.getElementById("content");
//获取在文本区域中键入的文本
let texta = document.getElementById("text").value;
//根据换行符分割行
let lines = texta.split("\n");
let cline = lines[lines.length - 1];
if (cline.startsWith("```")) {
tool.style.visibility = "visible";
}
para.innerText = texta;
}
英文:
I have a text area and a paragraph where I mirror the text entered by the user in the text area to the paragraph. Below that paragraph there is a code formatting tool that should be displayed when the user starts the current line in the text area with either four spaces or three back ticks. I use the event handler for the key press to achieve this behavior. However when I enter a character inside the text area then it won't be mirrored instantly in the paragraph until I enter another character. What should I do to my Javascript file so that it immediately gets the text and mirrors on the preview paragraph? I have tried OnChange but the result is the same, character doesn't get mirrored until I enter another character.
The TextArea
<text area onkeypress="duplicate()" class="form-control" rows="10" cols="10" id="text" ></textarea>
The JavaScript file
function duplicate() {
//define the code block section
let tool = document.getElementById("codeTool");
//get the paragraph to mirror
let para = document.getElementById("content");
//get the text typed in the text area
let texta = document.getElementById("text").value;
//split the lines based on the newline character
let lines = texta.split("\n");
let cline = lines[lines.length - 1];
if (cline.startsWith("```")) {
tool.style.visibility = "visible";
}
para.innerText = texta;
}
答案1
得分: 1
你可以尝试使用 onkeyup。
onkeydown 和 onkeypress 在文本区域的值更新之前触发。
function duplicate() {
// 获取要镜像的段落
let para = document.getElementById("content");
// 获取在文本区域中键入的文本
let texta = document.getElementById("text").value;
// 根据换行符拆分行
let lines = texta.split("\n");
let cline = lines[lines.length - 1];
if (cline.startsWith("```")) {
tool.style.visibility = "visible";
}
para.innerText = texta;
}
<textarea onkeyup="duplicate()" class="form-control" rows="10" cols="10" id="text"></textarea>
<p id="content"></p>
英文:
You can try using onkeyup.
onkeydown and onkeypress fire before value of textarea is updated.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function duplicate() {
//get the paragraph to mirror
let para = document.getElementById("content");
//get the text typed in the text area
let texta = document.getElementById("text").value;
//split the lines based on the newline character
let lines = texta.split("\n");
let cline = lines[lines.length - 1];
if (cline.startsWith("```")) {
tool.style.visibility = "visible";
}
para.innerText = texta;
}
<!-- language: lang-html -->
<textarea onkeyup="duplicate()" class="form-control" rows="10" cols="10" id="text" ></textarea>
<p id="content"></p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论