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

Name	Type	Default	Description
type	string || IpInputType	ipAddress || IpInputType.IpAddress	Determines the type of the IP address
v-model	string		Your model

Slots

Name	Description
clear	Slot for your clear button

Events

Name	Attributes	Listen to	Description
clear		@clear	Emitted when clear button is pressed
copy	string	@copy	Emitted when Ctrl-C or Copy is pressed
blur		@blur	Emitted when IpInput is blurred
focus		@focus	Emitted when IpInput is focused