diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/inputevent/data | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/inputevent/data')
| -rw-r--r-- | files/zh-cn/web/api/inputevent/data/index.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/inputevent/data/index.html b/files/zh-cn/web/api/inputevent/data/index.html new file mode 100644 index 0000000000..278695993d --- /dev/null +++ b/files/zh-cn/web/api/inputevent/data/index.html @@ -0,0 +1,69 @@ +--- +title: InputEvent.data +slug: Web/API/InputEvent/data +tags: + - API + - DOM Events + - InputEvent + - data +translation_of: Web/API/InputEvent/data +--- +<p>{{SeeCompatTable}}{{APIRef("DOM Events")}}</p> + +<div class="blockIndicator note"> +<p>请注意,<strong><code>data</code></strong> 属性在使用键盘输入时会返回输入的字符内容,但在粘贴、拖动时可能会返回 <code>null</code>,这取决于浏览器。浏览器也可能把一些数据保存在 {{domxref("InputEvent.dataTransfer")}},而不是该 <strong><code>data</code></strong> 属性中。</p> +</div> + +<p>{{domxref("InputEvent")}} 接口中的只读属性 <strong><code>data</code></strong> 返回含有插入字符数据的 {{domxref("DOMString")}}。如果更改未插入文本(例如删除字符时),则其可能为空字符串。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>string</em> = <em>inputEvent</em>.data;</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("DOMString")}}。</p> + +<h2 id="示例">示例</h2> + +<p>在下面的简单示例中,我们在 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event">input</a> 事件上设置了一个事件监听器,以便在对 {{htmlelement("input")}} 元素的内容进行任何更改时(通过键入或粘贴),通过 <strong><code>InputEvent.data</code></strong> 属性检索添加的文本,并在 <code><input></code> 下面的段落中报告。</p> + +<pre class="brush: html"><p>Some text to copy and paste.</p> + +<input type="text"> + +<p class="result"></p></pre> + +<pre class="brush: js">var editable = document.querySelector('input') +var result = document.querySelector('.result'); + +editable.addEventListener('input', (e) => { + result.textContent = "Inputted text: " + e.data; +});</pre> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('InputEvents2','#dfn-data','data')}}</td> + <td>{{Spec2('InputEvents2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据,请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<p>{{Compat("api.InputEvent.data")}}</p> +</div> |
