# How to access the pasted clipboard value

**URL:** <https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384>\
**Category:** Learn\
**Created:** [May 22, 2021, 3:52pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384 "2021-05-22T15:52:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![raephee2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/raephee2/32/3449_2.png) [@raephee2](https://discourse.elm-lang.org/u/raephee2)\
**Post date:** [May 22, 2021, 3:52pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384/1 "2021-05-22T15:52:36Z")

</div>

Hi,

I was trying to use the [onpaste event](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event) with a textarea element to access the clipboard’s content. I wrote a custom event handler but then I got stuck when I was about to find a way to decode the pasted value. I cannot simply access it through an object key like how `Html.Events.targetValue` works, I need to call the method `event.clipboardData.getData("text")`. How’s this this possible with Elm?

I cannot use ports here because I’m in the view layer. The only viable solution that comes to my mind is to create a custom element based on the TextareaElement and handle the paste event there. Is this really the way to do this?

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [May 22, 2021, 5:26pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384/2 "2021-05-22T17:26:08Z")

</div>

You’re correct that creating a custom element is the way to do it. Probably where the custom element listens to the `paste` event and emits a new `CustomEvent` with the pasted data and you Elm code listens to that custom event.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [May 22, 2021, 8:38pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384/3 "2021-05-22T20:38:15Z")

</div>

Exacltly as @wolfadex describes, I have some code for a custom element that does just that:

> <https://github.com/rupertlssmith/elm-input-spike/blob/main/assets/elm-editable.js#L105>

---

<div class="post-metadata">

**Author:** ![raephee2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/raephee2/32/3449_2.png) [@raephee2](https://discourse.elm-lang.org/u/raephee2)\
**Post date:** [May 23, 2021, 8:07pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384/4 "2021-05-23T20:07:09Z")

</div>

Thanks for the ideas.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 2, 2021, 8:08pm UTC](https://discourse.elm-lang.org/t/how-to-access-the-pasted-clipboard-value/7384/5 "2021-06-02T20:08:02Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.