node-red-dashboard/nodes/ui_text_input.html

A set of dashboard nodes for Node-RED

<script type="text/javascript">
    RED.nodes.registerType('ui_text_input',{
        category: 'dashboard',
        color: 'rgb(176, 223, 227)',
        defaults: {
            name: {value: ''},
            label: {value: ''},
            tooltip: {value: ''},
            group: {type: 'ui_group', required: true},
            order: {value: 0},
            width: {value: 0, validate: function(v) {
                    var width = v||0;
                    var currentGroup = $('#node-input-group').val()||this.group;
                    var groupNode = RED.nodes.node(currentGroup);
                    var valid = !groupNode || +width <= +groupNode.width;
                    $("#node-input-size").toggleClass("input-error",!valid);
                    return valid;
                }
            },
            height: {value: 0},
            passthru: {value: true},
            mode: {value: 'text', required: true},
            delay: {value: 300, validate: RED.validators.number()},
            topic: {value: ''}
        },
        inputs:1,
        outputs:1,
        outputLabels: function() { return this.mode; },
        icon: "ui_text.png",
        paletteLabel: 'text input',
        label: function() { return this.name || (~this.label.indexOf("{{") ? null : this.label) || this.mode+' input'; },
        labelStyle: function() { return this.name?"node_label_italic":""; },
        oneditprepare: function() {
            $("#node-input-size").elementSizer({
                width: "#node-input-width",
                height: "#node-input-height",
                group: "#node-input-group"
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="ui_text_input">
	<div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row">
        <label><i class="fa fa-object-group"></i> Size</label>
        <input type="hidden" id="node-input-width">
        <input type="hidden" id="node-input-height">
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row">
        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
        <input type="text" id="node-input-label">
    </div>
    <div class="form-row">
        <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
        <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
    </div>
    <div class="form-row">
        <label for="node-input-mode"><i class="fa fa-keyboard-o"></i> Mode</label>
        <select style="width:128px" id="node-input-mode">
            <option value="text">text input</option>
            <option value="email">email address</option>
            <option value="password">password</option>
            <option value="number">number</option>
            <option value="tel">telephone input</option>
            <option value="color">color picker</option>
            <option value="time">time picker</option>
            <option value="week">week picker</option>
            <option value="month">month picker</option>
        </select>
        <label for="node-input-delay" style="text-align:right; width:100px"><i class="fa fa-clock-o"></i> Delay (ms)</label>
        <input type="text" style="width:58px" id="node-input-delay">
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
    </div>
    <div class="form-row">
        <label style="padding-left: 25px; margin-right: -25px">Payload</label>
        <label style="width:auto">Current value</label>
    </div>
    <div class="form-row">
        <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px">Topic</label>
        <input type="text" id="node-input-topic">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name">
    </div>
    <div class="form-tips">Setting <b>Delay</b> to 0 waits for Enter or Tab key, to send input.</span></div>
</script>

<script type="text/x-red" data-help-name="ui_text_input">
  <p>Adds a text input field to the user interface. Mode can be regular text, email or color picker.</p>
  <p>Any input is sent as <code>msg.payload</code>. If set to ‘pass through mode’ an arriving <code>msg.payload</code>
      will be used if it is different from the existing text in the input field. This allows you to preset
      the text of the input field.</p>
  <p>The <b>Delay</b> <i>(default : 300ms)</i> sets the amount of time in milliseconds before the output is sent.
  Setting to <code>0</code> waits for "Enter" or "Tab" key to send. Enter will send payload but remain in focus.
  Tab will send payload and move to next field. Clicking elsewhere will also send the payload.</p>
  <p>The email mode will color in red if it is not a valid address and will return undefined.</p>
  <p>The time input type returns a number of milliseconds from midnight.</p>
  <p>Not all browsers support the <i>week</i> and <i>month</i> input types, and may return <i>undefined</i>.
  Please test your target browser(s) before use.</p>
  <p>If a <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.</p>
  <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the input.</p>
</script>