Foxit Developer

Number component ​

The number component inputs numeric values with range, step, and display options.

Code example ​

html
<html>
<template id="layout-template">
    <webpdf>
        <div class="flex-container">
            <number @tooltip tooltip-placement="right" tooltip-title="Any non numeric characters will be rejected"
                    min="0"></number>
            <number @tooltip tooltip-title="min=0,max=100,step=0.1" min="0" max="100" step="0.1"></number>
            <number @tooltip tooltip-title="use prefix and suffix" min="0" max="100" step="0.1" prefix="about "
                    suffix="%"></number>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .flex-container {
        display: flex;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>

API ​

Number component template ​

html
<number min="0" max="100" step="0.1" prefix="about " suffix="%"></number>

Methods ​

MethodDescriptionVersion
setValue(value: number)Sets and displays the value. Out-of-range values are adjusted to the nearest valid step. Does not fire change.7.1.0
getValue(): numberReturns the current value.7.1.0

Events ​

NameDescriptionExampleVersion
changeFires when the field loses focus and the value changed.number.on('change', (newValue, oldValue) => void)7.1.0