JavaScript DOM - Yagisanatode

A custom-build HTML Time Input Element

Recently while working on a project, I found that the standard HTML Time Input field (see below) wasn’t sufficient for my needs.

<input type="time" id="setTime" name="setTime" />

Standard HTML time input field

I needed users to be able to input 24hr time right down to the milliseconds. Something like this:

Features

Mobile Input will display the number pad

Under the hood, each input field is a number. This means that mobile devices should default to the number pad for convenience.

Value retrieval

Values are stored under the name time-<<timeType>> , for example time-hours.

You can loop over your form data and retrieve the names as needed or set a custom ID to the field as you create it dynamically with JavaScript. You can see an example of this in the Example 1: Single time field section.

Automatically moves to the next input

Setting field character limitsSetting character limits on each time field allows the cursor to automatically move to the next fields.

Client-Side Validation

Removing ‘Accepted’ number input characters that are not numbers

Yeah, yeah, you know you got to validate server-side too, but it’s good to let the user know that if they accidentally put in an accepted number character like e, +, - that it will be removed for them automatically.

Cannot exceed the number range

The max and min number ranges are set by default, but you can always change them manually.

Maybe you want to start with minutes, but as a duration and not a time, have minutes that go all the way up to 10,000. All good, just change the max value in the time-minute number input.

If a user puts in a number greater or less than the default min or max, the number will be replaced by the min or max respectively.

So for example, if the user sets 69 (hur hur hur) minutes but the max minutes is 60 then the field will default to 60.

Likewise, if the user sets the millisecond cell to 2 but your min is 500, then it will default to 500 milliseconds.

This is done with some JavaScript event listeners.

Returning back a tab will clear the field

Returning back a tab by cursor or shift-tab will clear out the field for the user to start afresh.

Prepends Zeros (0) to Any Number Not At Max Character Length

This is just an aesthetic thing, but it makes a difference. When a number’s character length is less than the maximum character length, then additional zeroes will be added to the front of the number.

Quickly add or remove a time input

The values of the time inputs are formatted using a generated CSS method for number inputs within the timeInput class. Further event listeners are looped over this class to allow for fewer or greater number-input elements.

As such, you can add days, months and years or, nanoseconds, microseconds and zeptoseconds. Alternatively, you could remove one of the existing time measures from the field.

The Code for the Custom Time Input field

You can grab a basic sample of the code here:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.5em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2.7em;
            text-align: center;
        }
    </style>
    <div class="timeInput">
        <span class="time-lables">HH</span>
        <span class="time-lables"></span>
        <span class="time-lables">MM</span>
        <span class="time-lables"></span>
        <span class="time-lables">SS</span>
        <span class="time-lables"></span>
        <span class="time-lables">MS</span>
        <input class="time-hours" type="number" name="time-hours" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-minutes" type="number" name="time-minutes" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-seconds" type="number" name="time-seconds" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"
            data-maxlen=4>
    </div>
    <br>
    <br>
    <br>
    <input type="time" id="setTime" name="setTime" />

    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()
    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.5em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2.7em;

text-align: center;

}

</style>

<input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<br>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

</script>

</body>

</html>

Example 1: Single time field

In this simple example, we will encapsulate the time input into a form and add a ‘submit’ button. Of course, you can add other form elements to the form as well.

In our script section, we added two functions submitForm() and getFormData() that is called on submit and retrieve all values in the form by their ‘name’ attribute.

I’ve put the submit button outside the form so you can see the logged results. If you wish to refresh the page or move to another page you can add the submit button inside the form.

Custom HTML Time Input Field inside a form with logged values

Check out the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

<input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

</form>

<button onclick="submitForm()">Submit</button>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Example 2: Multiple time fields

What if we want to have multiple instances of the custom time input in our HTML?

In this example, we will have a start and end time. Notice that we will need to change the name each time slightly so that the value is stored.

As such, in the example we append -start and -end to the input fields.

Yeap, that’s all you need to do.

Multiple Custom HTML Time Input Fields inside a form with logged values

Check out the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div>Start Time</div>
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours-start" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes-start" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds-start" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds-start" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
        <div>Start Time</div>
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours-end" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes-end" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds-end" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds-end" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

<div>Start Time</div>

<input class="time-milliseconds" type="number" name="time-milliseconds-start" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

<div>Start Time</div>

<input class="time-milliseconds" type="number" name="time-milliseconds-end" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

</form>

<button onclick="submitForm()">Submit</button>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Example 3: Build Multiple HTML Custom Time Input fields dynamically with JavaScript

In this final example, we want to dynamically create time input fields equal to the number of tests we have. We will do this with the createTimeHanlder() function.

Next, we will add the HTML for the custom time input into a template literal (A string with inputs) and then add a name and append a counter to the name tags of each number input element.

Dynamically create Multiple Custom HTML Time Input Fields inside a form with logged values

Here’s the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div id="target_timeInputs">
            

        </div>

    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">


        function createTimeFields(number){

            let htmlData = ""

            for(i= 0; i < number; i++){
                const num = i + 1

                const name = `Test ${num}`
                const appendName = `-${num}`

                const timeFields = `
            <div>${name}</div>
            <div class="timeInput">
                <span class="time-lables">HH</span>
                <span class="time-lables"></span>
                <span class="time-lables">MM</span>
                <span class="time-lables"></span>
                <span class="time-lables">SS</span>
                <span class="time-lables"></span>
                <span class="time-lables">MS</span>
                <input class="time-hours" type="number" name="time-hours${appendName}" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-minutes" type="number" name="time-minutes${appendName}" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-seconds" type="number" name="time-seconds${appendName}" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-milliseconds" type="number" name="time-milliseconds${appendName}" min=0 max=999 step=1 placeholder="000"
                    data-maxlen=4>
            </div>
            <hr>

                `   
                htmlData += timeFields

            }
                const targetElement = document.getElementById("target_timeInputs")
                targetElement.innerHTML = htmlData
                customTimeHandler()

        }
        createTimeFields(4)

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

</div>

</form>

<button onclick="submitForm()">Submit</button>

function createTimeFields(number){

let htmlData = ""

for(i= 0; i < number; i++){

const num = i + 1

const name = `Test ${num}`

const appendName = `-${num}`

const timeFields = `

<input class="time-milliseconds" type="number" name="time-milliseconds${appendName}" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

htmlData += timeFields

}

const targetElement = document.getElementById("target_timeInputs")

targetElement.innerHTML = htmlData

customTimeHandler()

}

createTimeFields(4)

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Conclusion

That’s it. I would love to hear how you used this in your own projects and what modifications you made. Let me know in the comments.

I am actually using this for a project for a Google Workspace Add-on using Google Apps Script along with an accompanying hosted private site using Golang, SQLite, temple and HTMX.

Have fun!

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

Create Removable Item Buttons Generated From Select or Comma-separated Input elements with HTML, CSS and JS

I am currently working on a larger project at the moment that requires a lot of front-end wrangling. As a part of this project, I needed to create Button Items that are generated by the user from both an HTML select element for one section and, a comma-separated text input in another section.

When a user selects an item from a select menu, a button appears in a desired area with the name of the selection and a small “X” that can be clicked to remove the item. Likewise, if a user wishes to create a bunch of items separated by commas in an input element and either hit the “Enter” or the “Add” button, then those items will be transformed as a bunch of individual buttons that the user can remove and change.

The buttons essentially become the user’s selection of items.

I also needed to be able to get a list of those item buttons for when I submit a form server-side or for some other task.

As a result, I created a small library called itemButton().

Note: If you have a bit of experience with front-end, then all you may need is to grab the CSS code and input.js file. If you need some further explanation you can find the information below.

What it does

The itemButton() library:

Creates a button named by the selection or the user’s input, This is removable should the user wish to change their choices.
Allows you to select the max number of items you want your users to be able to choose.
Easily extracts a list of buttons by ID and value.

An example

Take a look at an example:

https://youtu.be/m5EKy8BOa-o

Create removable button items from text input or select elements with JS, CSS & HTML. (https://youtu.be/m5EKy8BOa-o)

My inability to consistently fail to place an ‘e’ at the end of giraffe notwithstanding, you can see that the user can select items from a select element and they will be displayed in a chosen area below. Further, when the user types some words and separates them by a comma they are displayed as buttons in a div below it.

Limit the number of displayed Item Buttons

You might have also noted that the select element will only display two-item buttons, while the comma-separated list will display up to 10. You are able to create a maximum limit of any of your text input or select elements you are running itemButton() on.

Validation

When the user submits their items, itemButton() will:

Check for duplicates. If it already exists, it won’t be displayed again.
Remove any empty comma-separated elements.
Remove any non-alphanumeric characters.
Cut any text input items between commas to less than or equal to 25 characters (You can change this if you want).
Exchange any spaces between words with a dash for the button ID.
Any item starting with a number gets and “a” at the start of the button ID so it can be used in the HTML.

Getting a list if item buttons

As you can see in the video above, when the user clicks the Log Items button, an object of ids and values for each item is listed in the browser console using the list() method in itemButton(). This is most useful for when you are submitting data to the server.

Let’s have a gander at the code:

The Code

I have chosen to put the Javascript itemButton() library in an input.js file. In my project, I have other small classes or libraries in that file too. It is up to you how you want to add the code.

The CSS for the buttons is separate, and I have added it to my universal style.css file. Again you can put it anywhere you think works for you.

input.js

export { itemButton };

/**
 * Add, remove and list buttons from a coma separated text input or
 * from a select box.
 */
function itemButton() {
  let publicAPI = {};

  /**
   * Adds a deletable button from either an input or select tag.
   * @param {string} items - single item or string of comma separated items.
   * @param {string} selectionsLoc - id of the location the item buttons will be placed.
   * @param {number} numSelections - Total number of items permitted.
   */
  publicAPI.add = (items, selectionsLoc, numSelections) => {
    //Get the current list of button items.
    let currentItems = publicAPI.list(selectionsLoc);

    // If no items exists in button location item counter equals numSelection
    // else subtract the length of he current items.
    let itemCounter = !currentItems
      ? numSelections
      : numSelections - currentItems.length;

    if (itemCounter < 1) return; // If zero then  max number of items has been met.

    // ****Validate*****
    // separate by coma (if it exists) then filter our blank items.
    items
      .split(",")
      .filter((item) => item.trim().length != 0)
      .forEach((item) => {
        if (itemCounter < 1) return;

        //Reduce string length to 30 characters.
        let itemShort = item.substring(0, 25);

        // ****Create ID and Values*****
        // Create ID
        let itemID = itemShort
          .trim()
          .replace(/\s+/g, "-") //Replace spaces with dashes.
          .replace(/[^0-9a-z-]/gi, "") //Remove anything that isn't alphanumeric.
          .toLowerCase();

        //If itemID starts with a number add teh letter "a" so it is a valid HTML ID.
        itemID = isNaN(itemID[0]) ? itemID : `a${itemID}`;

        //Create Item Value
        let itemVal = itemShort.replace(/[^0-9a-z ]/gi, ""); //Remove anything that isn't alphanumeric.

        //Check if ID exits in current lists.
        let alreadyExists = false;
        if (currentItems) {
          for (let i = 0; i < currentItems.length; i++) {
            if (currentItems[i].id === itemID) {
              return (alreadyExists = false);
            }
          }
        }
        if (alreadyExists) return;

        // ****Create button*****
        //Create new span
        let selectionSpan = document.createElement("span");
        selectionSpan.setAttribute("value", itemVal);
        selectionSpan.setAttribute("id", itemID);
        selectionSpan.setAttribute("class", "item-btn");

        selectionSpan.innerHTML = `${itemVal} <button type="button" id="${itemID}" class="item-x-btn">✖</button>`;

        let selectLoc = document.querySelector(`#${selectionsLoc}`);
        selectLoc.appendChild(selectionSpan);

        // ****Add event listener for new button attached to item.****
        let selectedSpan = selectLoc.querySelector(`#${itemID}`);

        //Add an event listener on the "x" button to remove the item if clicked.
        selectedSpan.querySelector("button").addEventListener("click", () => {
          selectedSpan.remove();
        });

        --itemCounter;
        currentItems = publicAPI.list(selectionsLoc);
      });
  };

  /**
   * Get all the items in a selected tag location or false if none exist.
   * @param {string} selectionsLoc id of the location the item buttons will be placed.
   * @return {object|boolean} object of all current item buttons in selected tag
   *                          containing {id: , val: }. If none then false.
   */
  publicAPI.list = (selectionsLoc) => {
    let items = document.getElementById(selectionsLoc).querySelectorAll("span");

    //If no items exists return false
    if (items.length == 0) {
      return false;
    }
    return Object.keys(items).map((item) => {
      return {
        id: items[item].id,
        val: (() => {
          let val = items[item].innerText;
          return val.substr(0, val.length - 2);
        })(),
      };
    });
  };

  return publicAPI;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

export { itemButton };

/**

* Add, remove and list buttons from a coma separated text input or

* from a select box.

function itemButton() {

let publicAPI = {};

/**

* Adds a deletable button from either an input or select tag.

* @param {string} items - single item or string of comma separated items.

* @param {string} selectionsLoc - id of the location the item buttons will be placed.

* @param {number} numSelections - Total number of items permitted.

publicAPI.add = (items, selectionsLoc, numSelections) => {

//Get the current list of button items.

let currentItems = publicAPI.list(selectionsLoc);

// If no items exists in button location item counter equals numSelection

// else subtract the length of he current items.

let itemCounter = !currentItems

? numSelections

: numSelections - currentItems.length;

if (itemCounter < 1) return; // If zero then max number of items has been met.

// ****Validate*****

// separate by coma (if it exists) then filter our blank items.

items

.split(",")

.filter((item) => item.trim().length != 0)

.forEach((item) => {

if (itemCounter < 1) return;

//Reduce string length to 30 characters.

let itemShort = item.substring(0, 25);

// ****Create ID and Values*****

// Create ID

let itemID = itemShort

.trim()

.replace(/\s+/g, "-") //Replace spaces with dashes.

.replace(/[^0-9a-z-]/gi, "") //Remove anything that isn't alphanumeric.

.toLowerCase();

//If itemID starts with a number add teh letter "a" so it is a valid HTML ID.

itemID = isNaN(itemID[0]) ? itemID : `a${itemID}`;

//Create Item Value

let itemVal = itemShort.replace(/[^0-9a-z ]/gi, ""); //Remove anything that isn't alphanumeric.

//Check if ID exits in current lists.

let alreadyExists = false;

if (currentItems) {

for (let i = 0; i < currentItems.length; i++) {

if (currentItems[i].id === itemID) {

return (alreadyExists = false);

}

if (alreadyExists) return;

// ****Create button*****

//Create new span

let selectionSpan = document.createElement("span");

selectionSpan.setAttribute("value", itemVal);

selectionSpan.setAttribute("id", itemID);

selectionSpan.setAttribute("class", "item-btn");

selectionSpan.innerHTML = `${itemVal} <button type="button" id="${itemID}" class="item-x-btn">✖</button>`;

let selectLoc = document.querySelector(`#${selectionsLoc}`);

selectLoc.appendChild(selectionSpan);

// ****Add event listener for new button attached to item.****

let selectedSpan = selectLoc.querySelector(`#${itemID}`);

//Add an event listener on the "x" button to remove the item if clicked.

selectedSpan.querySelector("button").addEventListener("click", () => {

selectedSpan.remove();

});

--itemCounter;

currentItems = publicAPI.list(selectionsLoc);

});

};

/**

* Get all the items in a selected tag location or false if none exist.

* @param {string} selectionsLoc id of the location the item buttons will be placed.

* @return {object|boolean} object of all current item buttons in selected tag

* containing {id: , val: }. If none then false.

publicAPI.list = (selectionsLoc) => {

let items = document.getElementById(selectionsLoc).querySelectorAll("span");

//If no items exists return false

if (items.length == 0) {

return false;

}

return Object.keys(items).map((item) => {

return {

id: items[item].id,

val: (() => {

let val = items[item].innerText;

return val.substr(0, val.length - 2);

})(),

};

});

};

return publicAPI;

}

stlye.css

Add this to your main CSS file.

/* Buttons style for item selections such as categories and tags. */
.item-btn {
  background-color: #cfcdcd;
  color: rgb(24, 24, 24);
  border-radius: 5px;
  border: none;
  padding: 2px;
  text-align: center;
  display: inline-block;
  margin: 2px;
}

.item-x-btn {
  display: inline-block;
  border: none;
  background-color: #cfcdcd;
  box-shadow: none;
  margin-left: 1px;
  border-radius: 50%;
  color: rgb(24, 24, 24);
  font-size: small;
  line-height: 1.28;
  transition: 0.3s;
}
.item-x-btn:hover {
  background-color: firebrick;
  color: whitesmoke;
  cursor: pointer;
}
.item-x-btn:focus {
  outline: none;
}

/* Buttons style for item selections such as categories and tags. */

.item-btn {

background-color: #cfcdcd;

color: rgb(24, 24, 24);

border-radius: 5px;

border: none;

padding: 2px;

text-align: center;

display: inline-block;

margin: 2px;

}

.item-x-btn {

display: inline-block;

border: none;

background-color: #cfcdcd;

box-shadow: none;

margin-left: 1px;

border-radius: 50%;

color: rgb(24, 24, 24);

font-size: small;

line-height: 1.28;

transition: 0.3s;

}

.item-x-btn:hover {

background-color: firebrick;

color: whitesmoke;

cursor: pointer;

}

.item-x-btn:focus {

outline: none;

}

Quick use guide

Create the select button or input button

First, you will need to create your select or text input elements. Make sure that they have an appropriate ID that we can reference later. You can have as many select or text input elements as you want to reference the itemButton() class.

Take a look at the example below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
   

  </head>
  <body>
    <div class="container">
      <h1 align="center">Create removable button item lists from text input and select tags</h1>

        <!-- Selection menu used to create item buttons -->
        <div>
          <div>
            <label for="items">Add your selection</label>
            <select id="items" name="items"></select>
          </div>
        </div>

        <!-- Comma separated list that creates item buttons. -->
        <div>
          <div>
            <label for="tags"
              >Add your tags <em>(separate by comma): </em></label
            ></label>
            <input type="text" name="tags" id="tags" />
          </div>
          <div>
            <button id="addTag" type="button">Add</button>
          </div>
        </div>
      </form>
    </div>

<!DOCTYPE html>

<head>

<title>Example</title>

</head>

<body>

<h1 align="center">Create removable button item lists from text input and select tags</h1>

<div>

<label for="items">Add your selection</label>

</div>

<div>

<label for="tags"

>Add your tags <em>(separate by comma): </em></label

></label>

</div>

<div>

</div>

</form>

</div>

Here we have added a select element with an id of “items”. We also have a text input with an ID of “tags”. The “tags” element also has an “addTag” button that the user can use to add their tags.

Create a div or span for your item buttons to go

Next, we need to create a location to display your item buttons. In the example below, I have used a div directly below the select or input elements.

        <!-- Selection menu used to create item buttons -->
        <div>
          <div>
            <label for="items">Add your selection</label>
            <select id="items" name="items"></select>
          </div>
          <!-- Buttons for items selected appear here -->
          <div  id="items-selections"></div>
        </div>

        <!-- Comma separated list that creates item buttons. -->
        <div>
          <div>
            <label for="tags"
              >Add your tags <em>(separate by comma): </em></label
            ></label>
            <input type="text" name="tags" id="tags" />
          </div>
          <div>
            <button id="addTag" type="button">Add</button>
          </div>
          <!-- Buttons for tag appear here.  -->
          <div id="tags-selection"></div>

<div>

<label for="items">Add your selection</label>

</div>

</div>

<div>

<label for="tags"

>Add your tags <em>(separate by comma): </em></label

></label>

</div>

<div>

</div>

Importing the itemButton() code

Our next step will be inside the script tags of our HTML file. If you are importing just the input.js file into your HTML file you will need to invoke you script tags as a module :

<script type="module" src="input.js">
...
</script>

...

</script>

If you are importing more than one file, like I am in the example, I recommend you import your Javascript files like this:

<script type="module"> 
      import { items } from "./resources/items.js";
      import { itemButton } from "./resources/input.js";
... 
</script>

import { items } from "./resources/items.js";

import { itemButton } from "./resources/input.js";

...

</script>

In the example above, my two files are in the resources folder. The items.js file is just the file I have stored my list of select items.

Add event listeners

Your next task is to add event listeners for each of your elements. For me, I will add an “input” event for my select element.

For my text input, I will add both a “keypress” (Enter) listener if the user hits enter after typing in their items in the “tags” text input or a “click” if they hit the “Add” button. We will also clear out the tags after each use.

Take a look at the example:

      /**
       * Add a item button for items.
       */
      itemsLoc.addEventListener("input", () => {
        ...
      });


      /**
       * Add an item button for tags.
       */
      document.querySelector("#addTag").addEventListener("click", () => {
        let val = document.querySelector("#tags").value;
        ...
        document.querySelector("#tags").value = "";
      });

      document.querySelector("#tags").addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
          let val = document.querySelector("#tags").value;
          ...
          document.querySelector("#tags").value = "";
        }
      });

/**

* Add a item button for items.

itemsLoc.addEventListener("input", () => {

...

});

/**

* Add an item button for tags.

document.querySelector("#addTag").addEventListener("click", () => {

let val = document.querySelector("#tags").value;

...

document.querySelector("#tags").value = "";

});

document.querySelector("#tags").addEventListener("keypress", (e) => {

if (e.key === "Enter") {

let val = document.querySelector("#tags").value;

...

document.querySelector("#tags").value = "";

}

});

itemButton()

itemButton().add()

Now it’s time to add the button. We do this inside each event listener.

The add() method takes three arguments:

items – A string containing a single item or comma-separated list of items.
selectionsLoc – This is a string containing the ID reference of the location you want to display your buttons, usually in a div or span.
>numSelections – The maximum total number of items you wish to have the user select.

itemButton().add(items, selectionsLoc, numSelections)

Back to our example for our select element, our item is the value of the current selection. The location that we want to display our item buttons is theitems-selection div and the maximum number of items that our user can add is 2.

      /**
       * Add a item button for items.
       */
      itemsLoc.addEventListener("input", () => {
        itemButton().add(itemsLoc.value, "items-selections", 2);
      });

/**

* Add a item button for items.

itemsLoc.addEventListener("input", () => {

itemButton().add(itemsLoc.value, "items-selections", 2);

});

For our text input, the value is the comma-separated string of values that the user enters. The location the button items will be displayed in will be the tags-selection div and we will allow the user to add up to 10 items.

      /**
       * Add an item button for tags.
       */
      document.querySelector("#addTag").addEventListener("click", () => {
        let val = document.querySelector("#tags").value;
        itemButton().add(val, "tags-selection", 10);
        document.querySelector("#tags").value = "";
      });

      document.querySelector("#tags").addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
          let val = document.querySelector("#tags").value;
          itemButton().add(val, "tags-selection", 10);
          document.querySelector("#tags").value = "";
        }
      });

/**

* Add an item button for tags.

document.querySelector("#addTag").addEventListener("click", () => {

let val = document.querySelector("#tags").value;

itemButton().add(val, "tags-selection", 10);

document.querySelector("#tags").value = "";

});

document.querySelector("#tags").addEventListener("keypress", (e) => {

if (e.key === "Enter") {

let val = document.querySelector("#tags").value;

itemButton().add(val, "tags-selection", 10);

document.querySelector("#tags").value = "";

}

});

itemButton().list()

To get a list of item buttons from any of your assigned areas that display them, you can use the list() method.

This method takes one argument, the element id that the item buttons are contained in. The list method will return an object of key-value pairs containing:

{
  id: element id,
  val: the displayed value of the button
}

{

id: element id,

val: the displayed value of the button

}

The example

This example file setup is as follow:

index.html
main.css
resources
- inputs.js
- items.js

Here is the sample HTML file below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
   

  </head>
  <body>
    <div class="container">
      <h1 align="center">Create removable button item lists from text input and select tags</h1>

        <!-- Selection menu used to create item buttons -->
        <div>
          <div>
            <label for="items">Add your selection</label>
            <select id="items" name="items"></select>
          </div>
          <!-- Buttons for items selected appear here -->
          <div  id="items-selections"></div>
        </div>

        <!-- Comma separated list that creates item buttons. -->
        <div>
          <div>
            <label for="tags"
              >Add your tags <em>(separate by comma): </em></label
            ></label>
            <input type="text" name="tags" id="tags" />
          </div>
          <div>
            <button id="addTag" type="button">Add</button>
          </div>
          <!-- Buttons for tag appear here.  -->
          <div id="tags-selection"></div>
        </div>
        <hr>
        <button id="submit" type="button">Log Items</button>

      </form>
    </div>

    <script type="module">
      //Bring in list of items file and the item button methods.
      import { items } from "./resources/items.js";
      import { itemButton } from "./resources/input.js";


      /**
       * Generate options for item selection menu.
       */
      let options = `<option id="items-option1" disabled selected 
      value>-- select an option --</option>`.concat(
        items
          .map((item) => {
            return `<option value="${item}">${item}</option>`;
          })
          .join("\n")
      );

      let itemsLoc = document.querySelector("#items");
      itemsLoc.innerHTML = options;

      /**
       * Add a item button for items.
       */
      itemsLoc.addEventListener("input", () => {
        itemButton().add(itemsLoc.value, "items-selections", 2);
      });


      /**
       * Add a item button for tags.
       */
      document.querySelector("#addTag").addEventListener("click", () => {
        let val = document.querySelector("#tags").value;
        itemButton().add(val, "tags-selection", 10);
        document.querySelector("#tags").value = "";
      });

      document.querySelector("#tags").addEventListener("keypress", (e) => {
        if (e.key === "Enter") {
          let val = document.querySelector("#tags").value;
          itemButton().add(val, "tags-selection", 10);
          document.querySelector("#tags").value = "";
        }
      });

      /**
       * Log all selected items in console.
       */
      document.querySelector("#submit").addEventListener("click", () =>{
        console.log("items-selections", itemButton().list("items-selections"));
        console.log("tags-selection", itemButton().list("tags-selection"));
      })
    </script>
  </body>
</html>

100

<!DOCTYPE html>

<head>

<title>Example</title>

</head>

<body>

<h1 align="center">Create removable button item lists from text input and select tags</h1>

<div>

<label for="items">Add your selection</label>

</div>

</div>

<div>

<label for="tags"

>Add your tags <em>(separate by comma): </em></label

></label>

</div>

<div>

</div>

</div>

<hr>

<button id="submit" type="button">Log Items</button>

</form>

</div>

//Bring in list of items file and the item button methods.

import { items } from "./resources/items.js";

import { itemButton } from "./resources/input.js";

/**

* Generate options for item selection menu.

let options = `<option id="items-option1" disabled selected

value>-- select an option --</option>`.concat(

items

.map((item) => {

return `<option value="${item}">${item}</option>`;

})

.join("\n")

);

let itemsLoc = document.querySelector("#items");

itemsLoc.innerHTML = options;

/**

* Add a item button for items.

itemsLoc.addEventListener("input", () => {

itemButton().add(itemsLoc.value, "items-selections", 2);

});

/**

* Add a item button for tags.

document.querySelector("#addTag").addEventListener("click", () => {

let val = document.querySelector("#tags").value;

itemButton().add(val, "tags-selection", 10);

document.querySelector("#tags").value = "";

});

document.querySelector("#tags").addEventListener("keypress", (e) => {

if (e.key === "Enter") {

let val = document.querySelector("#tags").value;

itemButton().add(val, "tags-selection", 10);

document.querySelector("#tags").value = "";

}

});

/**

* Log all selected items in console.

document.querySelector("#submit").addEventListener("click", () =>{

console.log("items-selections", itemButton().list("items-selections"));

console.log("tags-selection", itemButton().list("tags-selection"));

})

</script>

</body>

</html>

And the resources > items.js file for the select element.

export const items = [
  "Cheese",
  "Cake",
  "Bananas",
  "Pizza",
  "Donuts",
  "Steak",
  "Cucumber",
  "Meat Pies",
  "Peaches",
  "Hamburgers",
  "Asparagus",
];

export const items = [

"Cheese",

"Cake",

"Bananas",

"Pizza",

"Donuts",

"Steak",

"Cucumber",

"Meat Pies",

"Peaches",

"Hamburgers",

"Asparagus",

];

The Wrap Up

I hope you found this small library useful for creating your own buttons. You may wish to make style changes to your buttons to match your own colour theme.

You may also wish to extend or reduce the length of characters for each item. You can do this in the input.js file on line 37.

You can download a copy of the example here:

itemButton.zip

I really like hearing how people apply these components to their own projects. Feel free to share in the comments below.

If you found this tool useful, please click the like button so I know that I am making good content. Or if you want to get updates on my latest posts, please subscribe (below the comments).

~Yagi

Simple Code for AB Testing Affiliate Recommendations in a WordPress Sidebar HTML Widget

Javascript, WordPress, Your Affiliate Program’s Campaign Link

The Story

When I created Yagisanatode.com my goal was to provide a resource for myself and others to reference on all the coding projects I work on. Since it’s beginnings in October 2017 I have seen a huge rise in my readership and am so pleased to see a growing community in my comments sections.

Your support has really helped me to produce more and, I hope, produce better content. Thanks.

Just take me to the code!!!

Continue reading “Simple Code for AB Testing Affiliate Recommendations in a WordPress Sidebar HTML Widget”

Features

Mobile Input will display the number pad

Value retrieval

Automatically moves to the next input

Client-Side Validation

Removing ‘Accepted’ number input characters that are not numbers

Cannot exceed the number range

Returning back a tab will clear the field

Prepends Zeros (0) to Any Number Not At Max Character Length

Quickly add or remove a time input

The Code for the Custom Time Input field

Example 1: Single time field

Example 2: Multiple time fields

Example 3: Build Multiple HTML Custom Time Input fields dynamically with JavaScript

Conclusion

Share this:

Like this:

What it does

An example

Limit the number of displayed Item Buttons

Validation

Getting a list if item buttons

The Code

input.js

stlye.css

Quick use guide

Create the select button or input button

Create a div or span for your item buttons to go

Importing the itemButton() code

Add event listeners

itemButton()

itemButton().add()

itemButton().list()

The example

The Wrap Up

Share this:

Like this:

The Story

Share this:

Like this: