CODEWITHSUNDEEP
javascripthtmlcss
Dr M L M J
Dr M L M J

Reputation: 2397

How to force user to enter input value in specific format?

I have a form where I want user should enter border css code in specific format.

e.g.

<input type="text" name="border_css" id="border_css" class="form-control"> <!-- Expecting this should be readonly -->

input value should be in format = "Npx solid #color"

like 1px dotted #FF0000 / 2px groove rgba(0,0,0,0.8)

Is there any javascript / any other option with 2 dropdowns for border-width and border-style and select color input field which will give output in border-width border-style border-color and put value in readonly input ? (in my example, autofill this value in input with name border_css while keeping it as readonly)

box-shadow generator is available in this format which I used for box-shadow input field.... (https://codepen.io/Montego/pen/oJgtl). But I googled for helpful border generator without any success.

Upvotes: 2

Views: 1040

Answers (2)

MTT
MTT

Reputation: 181

If I understand your question correctly, the following will help for hex and just add pattern for rgb…

<input type="text" name="border_css" id="border_css" class="form-control" onkeyup="a('...')" pattern=\"[a-fA-F0-9]+\">

Just add width validation using the same pattern method… also add value…

If I can help please let me know.

Upvotes: 0

Spectric
Spectric

Reputation: 31992

Something like this?

const width = document.querySelector('input[type="range"]');
const style = document.querySelector('select');
const color = document.querySelector('input[type="color"]');
const result = document.getElementById("border_css");

function updateInput() {
  result.value = width.value + "px " + style.value + " " + color.value;
}
width.addEventListener('input', updateInput);
style.addEventListener('input', updateInput);
color.addEventListener('input', updateInput);
td, th{
  text-align:start;
}
<table>
  <tr>
    <th>Width</th>
    <th>Style</th>
    <th>Color</th>
  </tr>
  <tr>
    <td><input type="range" min="1" max="100"></td>
    <td>
      <select>
        <option value="dotted">dotted</option>
        <option value="dashed">dashed</option>
        <option value="solid">solid</option>
        <option value="double">double</option>
      </select>
    </td>
    <td><input type="color"></td>
  </tr>
</table>
<input type="text" name="border_css" id="border_css" class="form-control" placeholder="result">

Upvotes: 1

Related Questions