When i use Chinese input method, and i am typing, the placeholder text is covered. #4507
Comments
|
I solved the problem by js, the core is add dynamic classname. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Include stylesheet -->
<link
href="https://unpkg.com/quill@2.0.2/dist/quill.snow.css"
rel="stylesheet"
/>
<style>
/* 添加一个隐藏placeholder的类 */
.hide-placeholder.ql-blank::before {
display: none;
}
</style>
</head>
<body>
<div id="editor"></div>
<!-- Include the Quill library -->
<script src="https://unpkg.com/quill@2.0.2/dist/quill.js"></script>
<script>
const quill = new Quill("#editor", {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
["image", "code-block"],
],
},
placeholder: "Compose an epic...",
theme: "snow",
});
// 获取编辑器容器
const editorContainer = document.querySelector(".ql-editor");
// 监听输入法开始事件
editorContainer.addEventListener("compositionstart", () => {
editorContainer.classList.add("hide-placeholder");
});
// 监听输入法结束事件
editorContainer.addEventListener("compositionend", () => {
// 如果内容为空，显示placeholder
if (!quill.getText().trim()) {
editorContainer.classList.remove("hide-placeholder");
}
});
// 监听常规输入事件
quill.on("text-change", function () {
if (!quill.getText().trim()) {
editorContainer.classList.remove("hide-placeholder");
}
});
// 监听失焦事件
quill.root.addEventListener("blur", () => {
if (!quill.getText().trim()) {
editorContainer.classList.remove("hide-placeholder");
}
});
</script>
</body>
</html> |
|
I find another way to solved the problem. quill = new Quill(....)
console.log(quill)
// we can get all of the properies of quill instance.
// I am confused get 'composition-before-start', it may be composition-start?
quill.on('composition-start', () => {
// 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发
// 这里我们直接操作其 dom 结构
quill.root.dataset.placeholder = ''
})
quill.on('composition-end', () => {
// 当用户使用拼音输入法输入完成后，把值恢复成原来的值
quill.root.dataset.placeholder = quill.options.placeholder
}) |
|
I have the same problem |
me too |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please describe the a concise description and fill out the details below. It will help others efficiently understand your request and get to an answer instead of repeated back and forth. Providing a minimal, complete and verifiable example will further increase your chances that someone can help.
Steps for Reproduction
Expected behavior: the placeholder text cannot cover what i am typing
Actual behavior: the placeholder text is covered my type
Platforms:
Include browser, operating system and respective versions
Version: v2.0.2
Run
Quill.versionto find outTranssioner20241129-170948.mp4
What it behave as above.
@zeke @ozgun @w00fz @logankoester @maartenvanvliet
The text was updated successfully, but these errors were encountered: