如何在input框area中输入值摁下回车键后,验证检测input框area里的值是否已在文本域areas中 (textarea里的值时回车符隔开的) ,如果存在则提示重复并不执行赋值到文本域里?
<div class="layui-row">
<form class="layui-form" action="" method="post" >
<div class="layui-form-item">
<label for="L_email" class="layui-form-label">
<span class="x-red"></span>区域</label>
<div class="layui-input-inline" style="width:415px">
<input type="text" id="area" name="area" lay-verify="sncheck|character"
autocomplete="off" class="layui-input" style="width:535px;" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')">
</div>
<div class="layui-input-inline">
<input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
</div>
</div>
<div id="piliang" style="display:none">
<div class="layui-form-item">
<label for="L_email" class="layui-form-label">
<span class="x-red"></span>区域集</label>
<div class="layui-input-inline" style="width:440px">
<textarea id="areas" name="areas" autocomplete="off" class="layui-input" style="width:535px;" readonly></textarea>
</div>
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button type="button" class="layui-btn" lay-submit lay-filter="add" onclick="func1();">提交
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
</div>
<script>
//监听多选框点击事件 主要是通过 lay-filter="switchTest" 来监听
form.on('switch(switchTest)', function (data) {
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启,true或者false
console.log(data.value); //开关value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
var x=data.elem.checked;
$('#area').attr("lay-verify","{required:false}");
$("#area").attr("name",'');
$("#piliang").show();
// 扫描二维码
$('#area').on('keydown', function (event) {
if (event.keyCode == 13) {
var area= $("#area").val();
if (!area) {
layer.msg('条码不能为空!', function (index) {
layer.close(index)
$('[name=area]').select();
});
return false;
}else if (area.length != 10 && area.length != 23) {
layer.msg('请输入[10位] 或者 [23位]字符的SN!', {icon: 5},function (index) {
//layer.msg('条码不能为空!', function (index) {
layer.close(index)
$('[name=area]').select();
});
return false;
}else{
var empty = "";
document.getElementById("areas").value += $("#area").val() + "\n";
$("#area").val(empty);
}
}
});
return false;
});
</script>
JavaScript
<script>
function func1() {
var area = document.getElementById("area").value;
if (area) {
var areas = document.getElementById("areas").value;
var areaArr = areas.split("\n");
if (areaArr.indexOf(area) == -1) {
document.getElementById("areas").value += area + "\n";
} else {
alert("该值已存在,请不要重复添加");
}
} else {
alert("请输入值");
}
}
</script>
实现了在按下回车键后,验证输入框中的值是否已经存在于文本域中,如果已经存在则提示重复,并不执行赋值到文本域。
该回答引用ChatGPT
您可以在输入框内按回车键后使用 JavaScript 进行验证:
获取文本域中的所有值,并将其分割成数组。
获取输入框中的值。
判断输入框的值是否已存在于文本域的数组中。
如果已存在,则提示重复并不执行赋值操作。
如果不存在,则将输入框的值追加到文本域中。
代码示例:
<script>
function func1() {
// 获取文本域中的所有值
var textareaValues = $("#areas").val().split("\n");
// 获取输入框中的值
var inputValue = $("#area").val();
// 判断输入框的值是否已存在于文本域的数组中
if (textareaValues.indexOf(inputValue) != -1) {
alert("该值已存在,请重新输入");
} else {
// 将输入框的值追加到文本域中
$("#areas").val($("#areas").val() + inputValue + "\n");
}
}
</script>
——我路胜能有今日境界,全是我天赋异禀….…chatgpt,全部加满!