87,994
社区成员
发帖
与我相关
我的任务
分享【请教】请教一段js写法：实时获取多个input值并拼接显示
需求：监听input的动作，实时提示出来。
网上找了一段代码，是单个input实时提示的，可以正常运行。如下
现在有多个input，需要组合显示在showtips_all中。
因为自己技术不行，没改成功。
现在想把showtips_subject和showtips_date也一起添加进入提示文字中。
（提示文字由3段组成：showtips_subject+showtips_date+showtips_title）
请指点！
网上找了一段代码，是单个input实时提示的，可以正常运行。如下
<div><input type="text" name="basic_title" id="showtips_title"></div>
<div><span id="showtips_all"></span></div>
<script>
var oBtn_title=document.getElementById('showtips_title');
var oTi_all=document.getElementById('showtips_all');
if('oninput' in oBtn_title){
oBtn_title.addEventListener("input",getWord,false);
}else{
oBtn_title.onpropertychange = getWord;
}
function getWord(){
oTi_all.innerHTML = oBtn_title.value;
}
</script>现在有多个input，需要组合显示在showtips_all中。
因为自己技术不行，没改成功。
<div>
<select name="classes_subject_select" id="showtips_subject">
<option value="你好">你好</option>
<option value="世界">世界</option>
</select>
</div>
<div><input type="text" name="basic_date" id="showtips_date"></div>
<div><input type="text" name="basic_title" id="showtips_title"></div>
<div><span id="showtips_all"></span></div>现在想把showtips_subject和showtips_date也一起添加进入提示文字中。
（提示文字由3段组成：showtips_subject+showtips_date+showtips_title）
请指点！
...全文
请发表友善的回复…
发表回复
weixin_50944805 2020-10-21
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<input type="text" name="" value="" />
</div>
<script>
let str = ''
const inps = document.querySelectorAll('.box input')
inps.forEach(el => {
el.oninput = function(){
str = ''
inps.forEach(v => {
str += v.value
})
console.log(str)
}
})
</script>
</body>
</html>
jio可 2020-10-21
- 打赏
- 举报
<div>
<select name="classes_subject_select" id="showtips_subject">
<option value="你好">你好</option>
<option value="世界">世界</option>
</select>
</div>
<div><input type="text" name="basic_date" id="showtips_date"></div>
<div><input type="text" name="basic_title" id="showtips_title"></div>
<div><span id="showtips_all"></span></div>
<script>
var sub = document.getElementById('showtips_subject'),
date = document.getElementById('showtips_date'),
title = document.getElementById('showtips_title'),
all = document.getElementById('showtips_all')
document.addEventListener('input', function() {
all.innerHTML = sub.value + date.value + title.value
})
sub.onchange = function () {
all.innerHTML = sub.value + date.value + title.value
}
</script>
落落叶叶无声 2020-10-21
- 打赏
- 举报
定义三个变量，再逐个监听记录即可...
<script>
let subject = '';
let date = '';
let title = '';
showtips_subject.onchange = function() {
subject = this.value;
showall()
}
showtips_date.oninput = function() {
date = this.value;
showall()
}
showtips_title.oninput = function() {
title = this.value
showall()
}
function showall() {
showtips_all.innerHTML = `${subject} ${date} ${title}`
}
</script>
