JQuery implements clicking buttons to add and delete input boxes

Preface

Used to record commonly used in development, quick development

New features required

For example, my device canset one or more keys, and sometimes I configureWhen I have one secret key, I don’t need multiple input boxes. When I want to configure multiple secret keys, I need to add multiple input boxes.

accomplish

HTML

<div class="form-group">
    <div class="row">
      <div class="col-sm-6">
        <label class="col-sm-3 control-label">NO传感器秘钥</label>
	      <div class="no-imput col-sm-9">
	        <input type="text" name="noSecretKeyJson" style="float:left;width: 85%;" class="form-control" oninput="if(value.length>8)value=value.slice(0,8)" />
	          <button type="button" id="noAddInput" style="float:left;margin-left: 5px;" class="addInput btn btn-outline btn-primary">
			    <i class="fa fa-plus"></i> 新增
			  </button>
	       </div>
	  </div>
	</div>
</div>

JS

// 按钮点击
$("#noAddInput").click(function(){
    
    
    // 编辑输入框
    let htmlInput = "<input type='text' name='noSecretKeyJson' style='margin-bottom: 5px;' class='form-control' οninput='if(value.length>8)value=value.slice(0,8)'/>"
    // 添加到 no-imput 下
	$(".no-imput").append(htmlInput);
 })

achieve effect

Need to delete the input box function

For example, my device canset one or more secret keys. When I want to configure multiple secret keys, but I want to delete one of the keys in the middle< /span>.

accomplish

HTML

<div class="form-group">
    <div class="row">
      <div class="col-sm-6">
        <label class="col-sm-3 control-label">NO传感器秘钥</label>
	      <div class="no-imput col-sm-9">
	        <input type="text" name="noSecretKeyJson" style="float:left;width: 85%;" class="form-control" oninput="if(value.length>8)value=value.slice(0,8)" />
	          <button type="button" id="noAddInput" style="float:left;margin-left: 5px;" class="addInput btn btn-outline btn-primary">
			    <i class="fa fa-plus"></i> 新增
			  </button>
	       </div>
	  </div>
	</div>
</div>

JS

$(document).ready(function () {
    
    
  $(document).on('click','.deleteBut',function(){
    
    
     $(this).parent().remove();
  })
  // 按钮点击
  $("#noAddInput").click(function(){
    
    
    // 编辑输入框
    let htmlInput = "<div><input type='text' name='noSecretKeyJson' style='margin-bottom: 5px;' class='no form-control' οninput='if(value.length>8)value=value.slice(0,8)'/><button type='button'  style='float:left;margin-left: 5px;' class='deleteBut btn btn-outline btn-danger'><i class='fa fa-trash'></i>删除</button></div>"
    // 添加到 no-imput 下
	$(".no-imput").append(htmlInput);
   })
});

achieve effect

Need to add input box restrictions

need:

• The input characters in the input box cannot exceed 8 characters.
• The input box can only enter characters and numbers, not Chinese.

The essential

Limit input to no more than 8 numbers

oninput="if(value.length>8)value=value.slice(0,8)"

Limit input to letters and numbers only

function handleInput(event) {
    
    
    const inputValue = event.target.value;
    const nonChineseRegex = /[^a-zA-Z0-9]/g; // 非中文字符的正则表达式
    const filteredValue = inputValue.replace(nonChineseRegex, ''); // 过滤掉非中文字符
    event.target.value = filteredValue; // 将输入框的值设置为过滤后的值
    console.log(event.target.value)
}

accomplish

HTML

<div class="form-group">
    <div class="row">
      <div class="col-sm-6">
        <label class="col-sm-3 control-label">NO传感器秘钥</label>
	      <div class="no-imput col-sm-9">
	        <input type="text" name="noSecretKeyJson" style="float:left;width: 85%;" class="form-control" oninput="if(value.length>8)value=value.slice(0,8)" />
	          <button type="button" id="noAddInput" style="float:left;margin-left: 5px;" class="addInput btn btn-outline btn-primary">
			    <i class="fa fa-plus"></i> 新增
			  </button>
	       </div>
	  </div>
	</div>
</div>

JS

function handleInput(event) {
    
    
    const inputValue = event.target.value;
    const nonChineseRegex = /[^a-zA-Z0-9]/g; // 非中文字符的正则表达式
    const filteredValue = inputValue.replace(nonChineseRegex, ''); // 过滤掉非中文字符
    event.target.value = filteredValue; // 将输入框的值设置为过滤后的值
    console.log(event.target.value)
}

achieve effect