如何将函数应用于包含所选文本的字段，具有多个字段的表单?(香草JavaScript)

Question

在具有多个字段(<input>和<textarea>)的表单中，我需要用html标签(即<b>)包装选定的文本。所以我写了下面的代码:

const form = document.forms[0];
const fields = form.querySelectorAll("input, textarea");
form.onsubmit = () => {
formatText("b");
return false;
}
const formatText = (key) => {
fields.forEach(el => {
var start = el.selectionStart;
var end = el.selectionEnd;
var len = el.value.length;
var sel_txt = el.value.substring(start, end);
if (sel_txt !== "") {
el.value = el.value.substring(0, start) + `<${key}>${sel_txt}</${key}>` + el.value.substring(end, len);
}
});
}

input,
textarea {
display: flex;
flex-direction: column;
width: 100%;
height: 30px;
margin-bottom: 20px;
border: 1px solid black;
padding: 10px;
}

<form>
<input name="a[]" type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<textarea name="a[]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<textarea name="a[]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button type="submit">Submit</button>
</form>

它的工作原理。但我不认为这是一个很好的解决方案，因为formatText函数遍历所有表单字段，而我只想将该函数应用于包含选定文本的字段。

我怎么能做到这一点在香草JavaScript，没有任何id/类选择器?

换句话说:是否有一种方法可以知道包含选定文本的字段是什么?

Answer 1

为了避免在submit上运行的循环，我倾向于使用一个变量来跟踪哪个元素最近有焦点。

我建议在范围内的所有表单元素上使用addEventListener，并更改变量以引用每个focus事件上最近关注的元素。

在提交表单后，您可以引用selectedField变量来确定要处理哪个元素。

<script>
const form = document.forms[0];
const fields = form.querySelectorAll("input, textarea");

var selectedField = null;
fields.forEach(field => {
field.addEventListener('focus', (event) => {
selectedField = event.target;
});
});
form.onsubmit = () => {
formatText("b", selectedField);
return false;
}
const formatText = (key, el) => { 
if(!el) return;

var start = el.selectionStart;
var end = el.selectionEnd;
var len = el.value.length;
var sel_txt = el.value.substring(start, end);
if (sel_txt !== "") {
el.value = el.value.substring(0, start) + `<${key}>${sel_txt}</${key}>` + el.value.substring(end, len);
}
}
</script>

在实践中，您可能希望将变量保留在全局作用域之外。

我不确定这个解决方案比你的好多少。如果您有许多表单字段，可能会减少处理工作—但是您仍然必须循环遍历所有元素以添加事件侦听器。