如何使 ContentEditable 框的突出显示区域变大？
[英]How do you make the Highlighted Area for a ContentEditable box larger?
问题描述
I'm building a UI that uses contentEditable elements to input data into a model.
我正在构建一个 UI，它使用contentEditable元素将数据输入 model。
At the moment, when you select the element, the box automatically highlights the box's current input only, see below:目前，当您输入 select 元素时，该框会自动突出显示该框的当前输入，如下所示：
This is an issue as it can sometimes hide the cursor. I would like to increase the default size of the highlighted box to something like 20px, however, adding a min-width style to each element doesn't seem to make a difference to the size of the highlighted box.这是一个问题，因为它有时会隐藏 cursor。我想将突出显示框的默认大小增加到 20px，但是，为每个元素添加min-width样式似乎对突出显示框的大小。
What styles do I have to set/ what do I have to change to make this highlighted box larger? styles 我必须设置什么/我必须更改什么才能使这个突出显示的框变大？
Please see a code snippet of my current solution below:请在下面查看我当前解决方案的代码片段：
const update_display = (id) => { const value = document.querySelector(`#${id}_input`).value; document.querySelector(`#${id}_display`).innerText = value; }; const displays = document.querySelectorAll("label a"); displays.forEach((display) => { display.style.marginRight = "5px"; display.style.marginLeft = "5px"; }); displays.forEach((display) => { display.addEventListener("keydown", (event) => { if (event.key === 'Enter') { event.preventDefault() } }) });
<label class="form-label">E_1: <a id="E1_display" contenteditable="true">0.85</a></label> <input id="E1_input" type="range" class="form-range" oninput="update_display('E1');run_surrogate()" min="0.7" max="1.0" step="0.01" />
3 个解决方案
解决方案1
1 2022-10-06 14:09:14
You could just add padding to the anchor element (label a).您可以只向锚元素（标签 a）添加填充。
[I am not sure why you have an a element here, but as you have that is what it being styled). [我不确定你为什么在这里有一个 a 元素，但你拥有的就是它的样式）。
const update_display = (id) => { const value = document.querySelector(`#${id}_input`).value; document.querySelector(`#${id}_display`).innerText = value; }; const displays = document.querySelectorAll("label a"); displays.forEach((display) => { display.style.marginRight = "5px"; display.style.marginLeft = "5px"; }); displays.forEach((display) => { display.addEventListener("keydown", (event) => { if (event.key === 'Enter') { event.preventDefault() } }) });
label a { padding: 10px; }
<label class="form-label">E_1: <a id="E1_display" contenteditable="true">0.85</a></label> <input id="E1_input" type="range" class="form-range" oninput="update_display('E1');run_surrogate()" min="0.7" max="1.0" step="0.01" />
解决方案2
1 已采纳 2022-10-06 18:03:05
<a> is an inline element, so properties such as width and height have no affect. <a>是内联元素，因此宽度和高度等属性没有影响。 While display: inline-block is a viable solution, display: inline-flex makes aligning content easier.虽然display: inline-block是一个可行的解决方案，但display: inline-flex使对齐内容更容易。 In Figure I is a part of the HTML of the example based on your OP.在图 I中是基于您的 OP 的示例的 HTML 的一部分。 Figure II is the CSS applied to the HTML of Figure I .图二是CSS应用于图一的HTML。
Figure I图一
<label class="form-label">E_1:
<a href="#" id="E1_display" name="display" class="form-display" contenteditable>0.85</a>
</label>
<!-- Range is wrapped in a <label> -->
<label class="form-label">
<input id="E1_range" name="range" class="form-range" min="0.7" max="1.0" step="0.01" value="0.85">
</label>
Figure II图二
.form-display {
/* inline-block + flex
Explicit width and height applies
Able to set vertical and horizontal position on content
*/
display: inline-flex;
/* Content is vertically centered */
align-items: center;
/* ch is the width of a zero: "0" */
min-width: 3.5ch;
height: 26px;
/* rem is equal to the default font-size found on <html> */
margin: 0 0.5rem;
padding: 0 1ch;
/* Needed because href="#" is added to each <a> - href allows <a>
to be recognized and collected as a live HTMLCollection via
document.links
*/
color: black;
/* As previous comment */
text-decoration: none;
}
.form-label {
display: inline-flex;
align-items: center;
margin-bottom: 0.75rem
}
The rest of the changes are not required, they are optional but strongly recommended. rest 的更改不是必需的，它们是可选的但强烈推荐。
const main = document.forms.main; const displays = Array.from(document.links); displays.forEach((display) => { display.addEventListener("keydown", function(event) { if (event.key === 'Enter') { event.preventDefault() } }); }); main.addEventListener("input", function(event) { const fc = this.elements; if (event.target.== this) { if (event.target.name === "range") { const id = event.target.id,slice(1; 2). const dis = document;getElementById("E" + id + "_display"). dis.textContent = event.target;value. } if (event.target.name === "display") { const id = event.target.id,slice(1; 2); const rng = fc["E" + id + "_range"]. rng.value = event.target;textContent; } } });
html { font: 300 2ch/1.15 "Segoe UI"; } #main { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; justify-items: stretch; align-items: stretch }.form-display { display: inline-flex; align-items: center; min-width: 3.5ch; height: 26px; margin: 0 0.5rem; padding: 0 1ch; color: black; text-decoration: none; }.form-label { display: inline-flex; align-items: center; margin-bottom: 0.75rem }
<form id="main"> <label class="form-label">E_1: <a href="#" id="E1_display" name="display" class="form-display" contenteditable>0.85</a></label> <label class="form-label"><input id="E1_range" name="range" class="form-range" type="range" min="0.7" max="1.0" step="0.01" value="0.85" /></label> <label class="form-label">E_2: <a href="#" id="E2_display" name="display" class="form-display" contenteditable>0.95489</a></label> <label class="form-label"><input id="E2_range" name="range" class="form-range" type="range" min="0.7" max="1.0" step="0.01" value="0.95489" /></label> <label class="form-label">E_3: <a href="#" id="E3_display" name="display" class="form-display" contenteditable>0.8</a></label> <label class="form-label"><input id="E3_range" name="range" class="form-range" type="range" min="0.7" max="1.0" step="0.01" value="0.8" /></label> </form>
解决方案3
0 2022-10-06 14:13:42
I'm adding this answer in case someone else has my exact use case.我添加这个答案以防其他人有我的确切用例。
I wanted to make the box 20px wide so the cursor was always viewable.我想让盒子宽 20 像素，这样20px总是可见的。 Rather than set a width on the box, I have managed to make the cursor viewable by changing marginRight to paddingRight .我没有在框上设置宽度，而是通过将marginRight更改为paddingRight设法使 cursor 可见。 As you can see, in the updated code below, the cursor is viewable in all cases.如您所见，在下面更新的代码中，cursor 在所有情况下都是可见的。
const update_display = (id) => { const value = document.querySelector(`#${id}_input`).value; document.querySelector(`#${id}_display`).innerText = value; }; const displays = document.querySelectorAll("label a"); displays.forEach((display) => { display.style.paddingRight = "5px"; display.style.paddingLeft = "5px"; }); displays.forEach((display) => { display.addEventListener("keydown", (event) => { if (event.key === 'Enter') { event.preventDefault() } }) });
<label class="form-label">E_1: <a id="E1_display" contenteditable="true">0.85</a></label> <input id="E1_input" type="range" class="form-range" oninput="update_display('E1');run_surrogate()" min="0.7" max="1.0" step="0.01" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.