ace-ip-input v0.0.14

Ace Ip Input

A convinient way to type IP address in your forms.

Features

• Type '.' to move to next octet
• Use arrow keys to navigate between octets
• Flawless usage of Backspace and Delete keys
• Type IP address with port or prefix

Installation and basic usage

npm install ace-ip-input

For the type prop you can just pass a string. (All possible types are listed down below)

<script setup>
import { ref } from "vue";
import { AceIpInput } from "ace-ip-input";

const ip = ref("");
</script>

<template>
  <div>
    <ace-ip-input v-model="ip" type="ipAddress" />
  </div>
</template>

<style src="ace-ip-input/style.css"></style>

Usage with TypeScript

Import the IpInputType enum to pass the type

<script setup lang="ts">
import { ref } from "vue";
import { AceIpInput, IpInputType } from "ace-ip-input";

const ip = ref("");
</script>

<template>
  <div>
    <ace-ip-input v-model="ip" type="IpInputType.Mask" />
  </div>
</template>

<style src="ace-ip-input/style.css"></style>

Props

Slots

Events