分享程序员开发的那些事...
更新时间：2022-03-24 06:31:59
始终将事件对象⁰传递给事件侦听器/处理程序/回调:
Always pass the Event Object⁰ to an event listener/handler/callback:
document.forms[0].addEventListener("input", syncData);
³ ²
function syncData(eventObj) {...
¹ ⁰
请注意，回调 function syncData()¹是一个未包装在事件侦听器中的命名函数.还要注意，当由事件侦听器/处理程序调用时，括号()²被删除.原因是因为()在呈现时将立即运行，而不是在触发注册事件时运行.这部分的最后一件事是注册到输入事件的DOM对象: document.forms [0] .这是通过 document.forms 接口
Note that the callback function syncData()¹ is a named function that's not wrapped in the event listener. Also note that when called by an event listener/handler the parenthesis ()² are removed. The reason why is because when rendered, () would run immediately rather than run when a registered event is fired. One last thing for this part is the DOM Object registered to the input event: document.forms[0]. That is a reference to the <form> tag via document.forms interface
事件属性: Event.target ¹和 Event.currentTarget ⁰来自事件对象. e.target 是对单击，输入等的标签的引用(例如 #slug )，而 e.currentTarget 是对已注册到事件的祖先标记的引用(例如 form ). form.elements 是一个类似数组的对象，包含给定 form (
The event properties: Event.target¹ and Event.currentTarget⁰ come from the Event Object. e.target is a reference to the tag that was clicked, inputted, etc. (ex. #slug) and e.currentTarget is a reference to the ancestor tag that's registered to the event (ex. form). The form.elements is an array-like object that contains all form fields of a given form, the .elements² property makes it possible to reference any of form controls by id or name -- this: form.elements.fields.title.value is the same as: document.getElementById('title').value;
const form = e.currentTarget;⁰
const active = e.target;¹
const fields = form.elements;²
我不确定您希望文本输入行为如何100％正确，因此我以两种方式进行了同步输入.
I wasn't 100% sure about how you wanted the text input behavior so I made the typing in sync both ways.
<!DOCTYPE html>
<html>
<head>
<style>
.as-console-wrapper {
width: 350px;
min-height: 100%;
margin-left: 45%;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
</style>
</head>
<body>
<form method="POST" action="http://laravel.dv/admin/blog/post/store" id="create-post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="2HeXBBKd1HSmpuGvjYqF1KygbGsCQaZtkuUthi1s">
<div class="page-title">
<h1>Create A Blog</h1>
</div>
<br>
<div class="row">
<div class="col-12">
<div class="form-control">
<input type="text" id="title" name="title" value="" placeholder="Title">
</div>
<div class="form-control">
<input type="text" id="slug" name="slug" value="" placeholder="Slug">
</div>
<div class="form-control">
<input type="file" name="image" placeholder="Image upload">
</div>
<div style="margin: 0 0 20px;">
<textarea name="body" id="summernote"></textarea>
</div>
</div>
<div class="col-12">
<input type="submit" name="btnSubmit" class="btn-primary" value="Save Post" />
</div>
</div>
</form>
<script>
document.forms[0].addEventListener("input", syncData);
function syncData(e) {
const form = e.currentTarget;
const active = e.target;
const fields = form.elements;
let txt;
if (active.type === 'text') {
txt = active.value.toLowerCase().replace(/\s+/g, '-');
console.log(txt);
active.title = txt;
fields.title.value = txt;
fields.slug.value = txt;
}
}
</script>
</body>
</html>