Sie sind hier : basti1012.de/ Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<style>

  .wowSelect > input { width:200px; cursor:pointer; }

.wowSelect > .options {

  width:200px;

  margin:0;

  padding:0;

  list-style-type:none;

  opacity:0.01;

}



.wowSelect > .options > li {

  margin:2px 0;

  padding:5px;

  cursor:pointer;

  border:1px solid #ccc;

}



.wowSelect > .options > li:hover { background:#eee; }



.wowFader { animation:fadeInOptions 2s forwards; }



@keyframes fadeInOptions {

  from { opacity:0.01; }

  to { opacity:1.0; }

}

</style>

<form name="foo">

<div class="wowSelect">

  <input type="text" name="valbox" placeholder="click for wow">

  <ul class="options">

    <li>Apfel</li>

    <li>Banane</li>

    <li>Birne</li>

  </ul>

</div>

</form>

<script>

  

  var _wow = document.querySelector('.wowSelect > input[name="valbox"]');

var _wowOpts = document.querySelector('.wowSelect > .options');



// click event for animation

_wow.addEventListener(

    'click'

    , (e) => { _wowOpts.classList.add('wowFader'); }

  );



// click event for options

document.querySelectorAll('.wowSelect > .options > li').forEach(

    (e) => {

      e.addEventListener(

        'click', () => {

          _wow.value = e.innerText;

          _wowOpts.classList.remove('wowFader');

        }

      );

    }

  );



</script>