Making a Custom Input Text Type

Making a custom input text type

UPDATE : Thanks to the comments of @Danield I updated with more appropriate unit.

You can use linear-gradient BUT you need to pay attention to different sizes and to the font-family if you want to have one letter inside one slot:

.input {

  /* each letter will take 1ch + 1px and we remove 1px of the last one*/

  width: calc(15 * (1ch + 1px) - 1px);

  border: 1px solid black;

  background: 

  /* 1ch space for the letter + 1px border */

  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));

  font-size: 29px;

  /*since a letter will take 1ch we add 1px to cover the border*/

  letter-spacing: 1px; 

  /*we use a monospace font-family so all the letter will take the same width = 1ch*/

  font-family: monospace;

}

<input class="input" type="text" maxlength="15" name="CNP">

<p>This will work with any font-size</p>

<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">

Is it possible to make your own custom input types in an HTML form?

Yes, you can do this, but you don't really make a new type of input, you're simply creating a type that the browser/rendering engine doesn't know about and will ignore. But the CSS should apply to it as you have it.

However, I would suggest that you simply add a class to the input instead, if this is simply for styling purposes.

<input class="my-input" ...>

input.my-input {
  ...
}

Create a custom input element

What you are expecting is not happening because that's not the correct way to extend an already built-in element.

As MDN documentation states, you need to keep the built-in tag in your DOM and affect it a is attribute.

Look at the snippet below by focusing on the spot input.

class spotInput extends HTMLInputElement {

  constructor(...args) {

    super(...args);

    

    this.addEventListener('focus', () => {

      console.log('Focus on spotinput');

    });

  }

};

customElements.define('spot-input', spotInput, {

  extends: 'input',

});

<input type="text" placeholder="simple input">

<input is="spot-input" type="text" placeholder="spot input">

Create custom html input

Add jquery to your page <script src="jquery.js" /> Then paste you HTML, and add a script tag like this:

<script>
    $(function(){
        $(".controlNumber")
        .blur(function(e){ 
            ///blur stuff
        })
        .keydown(function(e) {
            //keydown stuff
        });
</script>

You input should then have a class named controlNumber

<input type="text" class="controlNumber" />

Using class also give you a easy way to style all the controlNumber's

Show custom text in number input

You can use the placeholder attribute instead to display your text and use CSS to hide the actual value of the input. You can prevent the user from changing the value without the arrows by preventing the keydown, input, and drop events on the input. When the value of the input changes, if it is positive, the up spinner arrow was pressed and if not, the down spinner arrow was pressed; using this information, you can set the placeholder to an appropriate value to suit your needs.

Example:

const input = document.getElementById("note0");
["keydown", "input", "drop"].forEach(ev=>input.addEventListener(ev, function(e){
    e.preventDefault();//prevent user changing input value
}));
input.addEventListener("input", function(e){
  if(this.value >= 1){//up arrow pressed
    this.placeholder = "text1";
  } else {//down arrow pressed
    this.placeholder = "text2";
  }
  this.value = "";//reset value to display placeholder
});

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;/*show arrows for webkit browsers*/
}
input[type=number]{
  color: transparent;/*hide input value*/
}
input[type=number]::placeholder {
    color: black;/*change placeholder color*/
    font-weight: bold;
}

<input id="note0" type="number" min="0" max="1" step="1" placeholder="text">

How do I create a custom input svelte component and reuse prop types?

1. I suggest changing $$props to $$restProps. $$restProps includes all the props not explicitly exported, which means the label prop is excluded, which is likely what you want.
2. I suggest changing lang="typescript" to lang="ts", which will become the only valid way of signaling that the script code is TypeScript in the long run.
3. To express "extend from all valid input props", write interface $$Props extends .. { label: string } where .. is something you need to define yourself for now. You can take the contents of the HTMLAttributes definition as a start (ignoring the interfaces it extends from) and remove all properties that are not valid on input, or accept that this includes more than possible.

<style>
    input {
        width: 100%;
        display: block;
    }
</style>

<script lang="ts">
    import type { SvelteInputProps } from './filepath-to-your-typings'
    export let label: string = '' 
    interface $$Props extends SvelteInputProps {
        label: string;
    }
</script>

<label>
    {label}
    <input {...$$restProps} />
</label>

---

Related Topics