如何强制用户以特定格式输入输入值？

Question

我有一个表单，我希望用户应该以特定格式输入边框 css 代码。

例如

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

输入值应为 format = "Npx solid #color"

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

是否有任何 javascript/任何其他选项，带有 2 个下拉菜单，用于border-width和border-style并select color input field ，它将以border-width border-style border-color ，并将值放入只读输入？ （在我的示例中，使用名称border_css在输入中自动填充此值，同时将其保持为只读）

box-shadow 生成器以这种格式提供，我用于 box-shadow 输入字段......（ https://codepen.io/Montego/pen/oJgtl ）。 但我在谷歌上搜索了有用的边框生成器，但没有成功。

Answer 1

像这样的东西？

 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">

Answer 2

如果我正确理解您的问题，以下内容将有助于十六进制，只需为 rgb 添加模式...

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

只需使用相同的模式方法添加宽度验证......也添加价值......

如果我能帮忙，请告诉我。