JS Clipboard API - Support in Chrome

├── readme.md ├── mixed-content-iframes.html ├── clipboard-api.html ├── login-autofill.html ├── simple.html ├── pixel-ruler.html └── properties.tsv /readme.md: -------------------------------------------------------------------------------- 1 | ### tiny-demos-on-https 2 | 3 | can't do a jsbin on HTTPS but sometimes you need it. gh-pages to the rescue. 4 | -------------------------------------------------------------------------------- /mixed-content-iframes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /clipboard-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Clipboard API - Support in Chrome 7 | 8 | 9 | 10 |

Select any of this text, tap the button to copy it to clipboard.

11 |

Hey this paragraph is contenteditable so you can type in it too.. Or just copy some lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit voluptate quia molestiae nam minus voluptatibus, tempore maiores commodi, quisquam totam ad dolorem reiciendis iste. Quisquam, laudantium a nobis voluptate libero.

12 | 13 |

14 | 15 |

16 | 17 | 18 | 19 | 20 |

21 | 22 |

Shipping in Chrome 42. Chromestatus entry 24 |
W3C Clipboard API spec 25 | 26 |
Here's the JS behind the scenes: 27 |
28 | 29 | 30 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /login-autofill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | login autofill 4 | 5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 56 | -------------------------------------------------------------------------------- /simple.html: -------------------------------------------------------------------------------- 1 | 2 | hello everyone! 3 | 4 |
it's a beautiful day in the neighborhood
5 | 6 | 7 | -------------------------------------------------------------------------------- /pixel-ruler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | css pixel ruler demo page 8 | 9 | 147 | 148 | 149 | 150 | 151 | 152 |
153 | 154 | 155 |
156 | 157 | 158 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /properties.tsv: -------------------------------------------------------------------------------- 1 | property authored computed 2 | align-items center start 3 | align-items center stretch 4 | animation-duration 0.2s 0s 5 | animation-name gb__a none 6 | background-position 0 -2px 0px -2px 7 | background-position 0 -503px 0px -503px 8 | background-position -242px -62px 0% 0% 9 | background-repeat no-repeat repeat 10 | border-bottom-left-radius 2px 0px 11 | border-bottom-left-radius 3px 0px 12 | border-bottom-right-radius 2px 0px 13 | border-bottom-right-radius 3px 0px 14 | border-bottom-style solid none 15 | border-bottom-width 1px 0px 16 | border-left-style solid none 17 | border-left-width 1px 0px 18 | border-right-style solid none 19 | border-right-width 1px 0px 20 | border-top-left-radius 2px 0px 21 | border-top-left-radius 3px 0px 22 | border-top-right-radius 2px 0px 23 | border-top-right-radius 3px 0px 24 | border-top-style solid none 25 | border-top-width 1px 0px 26 | bottom 0 0px 27 | bottom 100% 1092px 28 | bottom -85px auto 29 | box-shadow 0 1px 0 rgba(0,0,0,.05) none 30 | box-shadow 0 2px 10px rgba(0,0,0,.2) none 31 | box-shadow 0 2px 10px rgba(0,0,0,.2) rgba(0, 0, 0, 0.2) 0px 2px 10px 0px 32 | box-shadow 0 2px 4px rgba(0,0,0,0.2) none 33 | box-shadow inset 0 2px 4px 0 rgba(0,0,0,.04) none 34 | box-sizing border-box content-box 35 | display block !important block 36 | display inline-block block 37 | display inline-block inline 38 | display list-item block 39 | display list-item inline 40 | display none !important none 41 | display none!important none 42 | display table inline 43 | filter none 44 | float left none 45 | float right none 46 | font-family arial,sans-serif arial, sans-serif 47 | font-family 'BrandonGrotesque-Black', Helvetica, Arial, sans-serif BrandonGrotesque-Black, Helvetica, Arial, sans-serif 48 | font-family 'BrandonTextBold', Helvetica, Arial, sans-serif BrandonTextBold, Helvetica, Arial, sans-serif 49 | font-family 'Helvetica Neue', Helvetica, Arial, sans-serif 'Helvetica Neue', Helvetica, Arial, sans-serif 50 | font-family inherit 'Baskerville Old Face', mariano_baskerville 51 | font-family 'lucida grande',tahoma,verdana,arial,sans-serif 'lucida grande', tahoma, verdana, arial, sans-serif 52 | font-family 'lucida grande', tahoma, verdana, arial, sans-serif 'lucida grande', tahoma, verdana, arial, sans-serif 53 | font-family Roboto,arial,sans-serif Roboto, arial, sans-serif 54 | font-family 'SM4' SM4 55 | font-size 0 0px 56 | font-size 100% 0px 57 | font-size 15pt 20px 58 | font-size 1em 16px 59 | font-size .76923077em 10px 60 | font-size 80% 12.8000001907349px 61 | font-size .875em 14px 62 | font-weight 400 normal 63 | font-weight bold!important bold 64 | height 0 0px 65 | height 0 48px 66 | height 100% 0px 67 | height 100% 1053px 68 | height 100% 1077px 69 | height 100% 1092px 70 | height 100% 14px 71 | height 100% 154px 72 | height 100% 16px 73 | height 100% 20px 74 | height 100% 240px 75 | height 100% 29px 76 | height 100% 30px 77 | height 100% 340px 78 | height 100% 40px 79 | height 100% 41px 80 | height 100% 44px 81 | height 100% 6078px 82 | height 100% 80px 83 | height 100% auto 84 | height 14px auto 85 | height 1px 4px 86 | height 26px auto 87 | height 28px 18px 88 | height 60px 30px 89 | height 60px auto 90 | height auto 133px 91 | height auto 150px 92 | height auto 152px 93 | height auto 165px 94 | height auto 197.3125px 95 | height auto 197px 96 | height auto 234.5625px 97 | height auto 237.3125px 98 | height auto 240.328125px 99 | height auto 240px 100 | height auto 257px 101 | height auto 27px 102 | height auto 290px 103 | height auto 299px 104 | height auto 3174.25px 105 | height auto 32px 106 | height auto 3326.25px 107 | height auto 40px 108 | height auto 4226.25px 109 | height auto 44px 110 | height auto 4515.25px 111 | height auto 4585.25px 112 | height auto 60px 113 | height auto 744.625px 114 | justify-content flex-end flex-start 115 | justify-content flex-end start 116 | left 0 0px 117 | left 0 auto 118 | left -1px auto 119 | left 30% auto 120 | letter-spacing 0.24em 4.80000019073486px 121 | letter-spacing 0.2em 3.20000004768372px 122 | line-height 100% 13px 123 | line-height 1 11px 124 | line-height 1.1 22px 125 | line-height 1.28 14.0799999237061px 126 | line-height 1.34 14.7399997711182px 127 | line-height 1.34 16.0799999237061px 128 | line-height 1.34 18.7600002288818px 129 | line-height 1.375 13.75px 130 | line-height 1.375 17.875px 131 | line-height 1.375 22px 132 | line-height 1.4 15.3999996185303px 133 | line-height 1.4 16.7999992370605px 134 | line-height 1.4 18.2000007629395px 135 | line-height 1.42857 19.999979019165px 136 | line-height 1em 14px 137 | margin-bottom 0 0px 138 | margin-bottom 0em 0px 139 | margin-bottom 0px 16px 140 | margin-bottom 11px 0px 141 | margin-bottom 15% 0px 142 | margin-bottom 20px 0px 143 | margin-bottom 5px 0px 144 | margin-bottom 8px 0px 145 | margin-bottom auto 0px 146 | margin-left 0 0px 147 | margin-left 0em 0px 148 | margin-left 0!important 0px 149 | margin-left 0px 2px 150 | margin-left 17px 0px 151 | margin-left 20px 0px 152 | margin-left 2px 0px 153 | margin-left -400px 0px 154 | margin-left 5px 0px 155 | margin-left 8px 0px 156 | margin-left auto 0px 157 | margin-right 0 0px 158 | margin-right 0em 0px 159 | margin-right 0 !important 0px 160 | margin-right 0!important 0px 161 | margin-right 16px 0px 162 | margin-right 2px 0px 163 | margin-right 4px 0px 164 | margin-right 5px 0px 165 | margin-right 60px 0px 166 | margin-right 60px 2px 167 | margin-right auto 0px 168 | margin-top 0 0px 169 | margin-top 0em 0px 170 | margin-top 0px 16px 171 | margin-top 10px 0px 172 | margin-top 11px 0px 173 | margin-top 15% 0px 174 | margin-top 15px 0px 175 | margin-top 5px 0px 176 | margin-top 8px 0px 177 | margin-top auto 0px 178 | max-height 310px none 179 | max-width 47.938em 767.007995605469px 180 | max-width 50vw none 181 | max-width 63.938em 1023.00799560547px 182 | max-width none !important none 183 | min-height 0 0px 184 | min-height 100px 0px 185 | min-height 13px 0px 186 | min-height 40px 0px 187 | min-width 0 0px 188 | min-width 1177px 0px 189 | min-width 315px 0px 190 | min-width 54px 0px 191 | min-width -webkit-min-content min-content 192 | opacity .15 0.150000005960464 193 | opacity .55 0.550000011920929 194 | opacity .7 0.699999988079071 195 | overflow-x hidden visible 196 | overflow-y auto visible 197 | overflow-y hidden!important hidden 198 | overflow-y hidden visible 199 | overflow-y scroll visible 200 | padding-bottom 15px 0px 201 | padding-bottom 20px 0px 202 | padding-bottom 23px 0px 203 | padding-bottom 28px 0px 204 | padding-bottom 2px 0px 205 | padding-bottom 3px 0px 206 | padding-bottom 6px 0px 207 | padding-bottom 7px 0px 208 | padding-left 0 0px 209 | padding-left 10px 0px 210 | padding-left 20px 0px 211 | padding-left 28px 0px 212 | padding-left 2px 0px 213 | padding-left 30px 0px 214 | padding-left 3px 0px 215 | padding-left 400px 0px 216 | padding-left 5px 0px 217 | padding-left 6px 0px 218 | padding-left 7px 0px 219 | padding-left 8px 0px 220 | padding-right 0 0px 221 | padding-right 10px 0px 222 | padding-right 16px 0px 223 | padding-right 20px 0px 224 | padding-right 21px 0px 225 | padding-right 27px 0px 226 | padding-right 30px 0px 227 | padding-right 3px 0px 228 | padding-right 6px 0px 229 | padding-right 8em 0px 230 | padding-right 8px 0px 231 | padding-top 0 0px 232 | padding-top 0.3em 0px 233 | padding-top 0 !important 0px 234 | padding-top 10px 0px 235 | padding-top 20px 0px 236 | padding-top 28px 0px 237 | padding-top 2px 0px 238 | padding-top 3px 0px 239 | padding-top 6px 0px 240 | padding-top 7px 0px 241 | position absolute static 242 | position fixed relative 243 | position relative !important static 244 | position relative static 245 | right 0 0px 246 | right 0 auto 247 | table-layout fixed auto 248 | text-align -webkit-match-parent center 249 | text-align -webkit-match-parent left 250 | text-decoration-line underline none 251 | text-decoration none none solid rgb(0, 0, 0) 252 | text-decoration none none solid rgb(115, 115, 115) 253 | text-decoration none none solid rgb(145, 151, 163) 254 | text-decoration none none solid rgb(255, 255, 255) 255 | text-decoration none none solid rgb(34, 34, 34) 256 | text-decoration none none solid rgb(35, 41, 55) 257 | text-decoration none none solid rgb(38, 38, 38) 258 | text-decoration none none solid rgb(51, 102, 204) 259 | text-decoration none none solid rgb(59, 89, 152) 260 | text-decoration none none solid rgb(60, 185, 213) 261 | text-decoration none none solid rgb(64, 64, 64) 262 | text-decoration none none solid rgb(72, 80, 82) 263 | text-decoration none none solid rgb(78, 86, 101) 264 | text-decoration none underline solid rgb(59, 89, 152) 265 | text-decoration underline underline solid rgb(255, 255, 255) 266 | text-indent 0 0px 267 | text-overflow ellipsis clip 268 | top 0 0px 269 | top 0 auto 270 | top 0px auto 271 | top 30% auto 272 | top 44px auto 273 | top 50% 468px 274 | top 50px auto 275 | transform translate3d(0,-5px,0) matrix(1, 0, 0, 1, 0, -5) 276 | transition-delay initial, initial 0s, 0s 277 | transition-delay initial, initial, initial 0s 278 | transition-duration 0.218s, 0.218s, 0.218s 0s 279 | transition-duration 0.218s 0s 280 | transition-duration 0.5s 0s 281 | transition-duration 0.7s 0s 282 | transition-duration 400ms 0s 283 | transition-property background all 284 | transition-property height all 285 | transition-property opacity all 286 | transition-timing-function cubic-bezier(0.17, 0.04, 0.03, 0.94) ease 287 | transition-timing-function cubic-bezier(0.17, 0.67, 0.44, 1.1) ease 288 | transition-timing-function initial, initial ease, ease 289 | transition-timing-function initial, initial, initial ease 290 | unicode-bidi embed normal 291 | vertical-align middle baseline 292 | vertical-align top baseline 293 | -webkit-animation-duration 0.2s 0s 294 | -webkit-animation-name gb__a none 295 | -webkit-appearance push-button none 296 | -webkit-background-clip padding-box border-box 297 | -webkit-border-horizontal-spacing 2px 0px 298 | -webkit-border-vertical-spacing 2px 0px 299 | -webkit-box-shadow none 300 | -webkit-box-shadow rgba(0, 0, 0, 0.2) 0px 2px 10px 0px 301 | -webkit-clip-path polygon(175.800003051758px 129px, 0px -111.200243775551px, 0px 129px) polygon(175.800003051758px 129px, 0px -111.200241088867px, 0px 129px) 302 | -webkit-transform matrix(1, 0, 0, 1, 0, -5) 303 | -webkit-transform-origin 0px 0px 0px 0px 0px 304 | -webkit-transition-delay initial, initial 0s, 0s 305 | -webkit-transition-delay initial, initial, initial 0s 306 | -webkit-transition-duration 0.218s, 0.218s, 0.218s 0s 307 | -webkit-transition-duration 0.218s 0s 308 | -webkit-transition-duration 0.5s 0s 309 | -webkit-transition-duration 0.7s 0s 310 | -webkit-transition-duration 400ms 0s 311 | -webkit-transition-property background all 312 | -webkit-transition-property height all 313 | -webkit-transition-property opacity all 314 | -webkit-transition-timing-function cubic-bezier(0.17, 0.04, 0.03, 0.94) ease 315 | -webkit-transition-timing-function cubic-bezier(0.17, 0.67, 0.44, 1.1) ease 316 | -webkit-transition-timing-function initial, initial ease, ease 317 | -webkit-transition-timing-function initial, initial, initial ease 318 | width 0 0px 319 | width 100% 0px 320 | width 100% 151px 321 | width 100% 156px 322 | width 100% 168px 323 | width 100% 172px 324 | width 100% 197px 325 | width 100% 237px 326 | width 100% 257px 327 | width 100% 272px 328 | width 100% 278px 329 | width 100% 30px 330 | width 100% 524px 331 | width 100% 571px 332 | width 100% 780px 333 | width 100% auto 334 | width 10ex 0px 335 | width 174px auto 336 | width 179px 112px 337 | width 179px 140px 338 | width 179px 168px 339 | width 179px 20.34375px 340 | width 179px auto 341 | width 1px 4px 342 | width 230px 214px 343 | width 230px auto 344 | width 244px 254px 345 | width 244px auto 346 | width 265px auto 347 | width 28px 0px 348 | width 33.3% 33.2999992370606% 349 | width 42.56em auto 350 | width 69% auto 351 | width auto 168px 352 | width auto 18.046875px 353 | width auto 90px 354 | width auto !important 257px 355 | word-spacing normal 0px 356 | z-index 10 auto 357 | z-index 2 0 358 | z-index 2 auto 359 | z-index 4000 auto 360 | z-index 986 auto 361 | z-index -9 auto 362 | z-index auto 0 363 | --------------------------------------------------------------------------------

Select any of this text, tap the button to copy it to clipboard.

it's a beautiful day in the neighborhood