87,994
社区成员
发帖
与我相关
我的任务
分享如何实现下面点击按钮按钮的值显示在输出框，在输入框输入内容同步显示在输出框中，
点击一次按钮按钮的值显示在输出框中，在点击同一个按钮，输出框这个按钮的值消失，
点击一次按钮后，再在输入框中输入内容，同步显示在下面，下面输出框的值=按钮的值+输入框的值，再删除输入框的内容。下面输出框的值=按钮
代码如下
/head>
<body>
<div id="content" style="margin: 20px">
<div>
<div>
<input type="button" value="按钮1" style="width: 14%;height: 45px">
<input type="button" value="按钮3" style="width: 14%;height: 45px">
<input type="text" style="width: 15%;height: 35px"onkeyup="document.getElementById('text').value=this.value" >~
<input type="text" style="width: 15%;height: 35px" onkeyup="document.getElementById('text').value=this.value" >
<input type="button" value="按钮2" style="width: 14%;height: 45px">
<input type="button" value="按钮4" style="width: 14%;height: 45px">
</div>
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
自渡96 2017-11-17
- 打赏
- 举报
附上代码
/head>
<body>
<div id="content" style="margin: 20px">
<div>
<div>
<input type="button" value="按钮1" style="width: 14%;height: 45px">
<input type="button" value="按钮3" style="width: 14%;height: 45px">
<input type="text" style="width: 15%;height: 35px"onkeyup="document.getElementById('text').value=this.value" >~
<input type="text" style="width: 15%;height: 35px" onkeyup="document.getElementById('text').value=this.value" >
<input type="button" value="按钮2" style="width: 14%;height: 45px">
<input type="button" value="按钮4" style="width: 14%;height: 45px">
</div>
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
</body>
</html>
自渡96 2017-11-17
- 打赏
- 举报
自己顶一下。求解
天际的海浪 2017-11-17
- 打赏
- 举报
这代码按钮状态是用class的值判断的，你按钮上加了其实class，判断起来就比较
function gre(t) {
t.className = t.className=="button"?"button select":"button";
setout();
}
function setout() {
var inp = document.getElementById("content").getElementsByTagName("input");
document.getElementById("text").value =
(inp[0].className=="button select"?inp[0].value+"":"")
+(inp[1].className=="button select"?inp[1].value+"":"")
+inp[2].value
+(inp[3].value!=""?"~":"")
+inp[3].value
+(inp[4].className=="button select"?inp[4].value+"":"")
+(inp[5].className=="button select"?inp[5].value+"":"")
+(inp[6].className=="button select"?inp[6].value+"":"")
+(inp[7].className=="button select"?inp[7].value+"":"")
+inp[8].value
+(inp[9].value!=""?"-":"")
+inp[9].value
+(inp[10].className=="button select"?inp[10].value+"":"")
+(inp[11].className=="button select"?inp[11].value+"":"")
+(inp[12].className=="button select"?inp[12].value+"":"")
+(inp[13].className=="button select"?inp[13].value+"":"")
+(inp[14].className=="button select"?inp[14].value+"":"")
+(inp[15].className=="button select"?inp[15].value+"":"")
+(inp[15].className=="button select"?inp[15].value+"":"")
+(inp[16].className=="button select"?inp[16].value+"":"")
+(inp[17].className=="button select"?inp[17].value+"":"")
+(inp[18].className=="button select"?inp[18].value+"":"")
+(inp[19].className=="button select"?inp[19].value+"":"")
+(inp[20].className=="button select"?inp[20].value+"":"")
+(inp[21].className=="button select"?inp[21].value+"":"")
+(inp[22].className=="button select"?inp[22].value+"":"")
+(inp[23].className=="button select"?inp[23].value+"":"")
+(inp[24].className=="button select"?inp[24].value+"":"")
+(inp[25].className=="button select"?inp[25].value+"":"")
+(inp[26].className=="button select"?inp[26].value+"":"")
+(inp[27].className=="button select"?inp[27].value+"":"")
+(inp[28].className=="button select"?inp[28].value+"":"")
+(inp[29].className=="button select"?inp[29].value+"":"");
}
自渡96 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
[/quote]
问题是这样子加了以后我再删除第二个输入框的内容，那个符号还会存在啊[/quote]
我补全的代码每个按钮第一次使用要点击两次才能用，找不到问题在哪里，帮帮忙呗
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
.select {
background-color: #17aeff;
}
</style>
</head>
<body>
<div id="content" style="margin: 20px">
<div>
<legend>轴号/环号：</legend><br />
<div style="height: 45px;line-height: 45px;">
<input class="button" type="button" value="左线" style="width: 14%;height: 45px" onclick="gre(this)">
<input class="button" type="button" value="右线" style="width: 14%;height: 45px" onclick="gre(this)">
<input class="number" type="text" style="width: 15%;height: 40px" onkeyup="setout()">~
<input class="number" type="text" style="width: 15%;height: 40px" onkeyup="setout()">
<input class="button" type="button" value="轴" style="width: 14%;height: 45px" onclick="gre(this)">
<input class="button" type="button" value="环" style="width: 14%;height: 45px" onclick="gre(this)">
</div>
<div style="height: 45px;line-height: 45px;margin-top: 10px">
<input type="button" value="左线" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="右线" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input class="number" type="text" style="width: 15%;height: 40px;margin-right: 3px" onkeyup="setout()">-
<input class="number" type="text" style="width: 15%;height: 40px;margin-left: 2px" onkeyup="setout()">
<input type="button" value="轴" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="环" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
</div>
</div>
<hr style="margin: 20px 0">
<div style="margin: 10px 0">
<legend>楼层：</legend><br />
<div>
<input type="button" value="负" style="width: 14%;height: 45px" class="button" onclick="gre(this)"> ：
<input type="button" value="1" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="2" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="3" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="4" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="5" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
</div>
</div>
<hr style="margin: 20px 0">
<div>
<legend>常用词库：</legend><br />
<input type="button" value="侧" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="中" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="顶" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="底" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<br/>
<input type="button" value="梁" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="板" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="柱" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="墙" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="桩" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<br/>
<input type="button" value="导墙" style="width: 14%;height: 45px" class="button" onclick="gre(this)">
<input type="button" value="分隔墙" class="button" style="width: 20%; height:45px" onclick="gre(this)">
<input type="button" value="钢支撑" class="button" style="width: 20%; height:45px" onclick="gre(this)">
<input type="button" value="栓支撑" class="button" style="width: 20%; height:45px" onclick="gre(this)">
</div>
<hr style="margin: 20px 0">
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
<script type="text/javascript">
function gre(t) {
t.className = t.className==""?"select":"";
setout();
}
function setout() {
var inp = document.getElementById("content").getElementsByTagName("input");
document.getElementById("text").value =
(inp[0].className=="select"?inp[0].value+"":"")
+(inp[1].className=="select"?inp[1].value+"":"")
+inp[2].value
+(inp[3].value!=""?"~":"")
+inp[3].value
+(inp[4].className=="select"?inp[4].value+"":"")
+(inp[5].className=="select"?inp[5].value+"":"")
+(inp[6].className=="select"?inp[6].value+"":"")
+(inp[7].className=="select"?inp[7].value+"":"")
+inp[8].value
+(inp[9].value!=""?"-":"")
+inp[9].value
+(inp[10].className=="select"?inp[10].value+"":"")
+(inp[11].className=="select"?inp[11].value+"":"")
+(inp[12].className=="select"?inp[12].value+"":"")
+(inp[13].className=="select"?inp[13].value+"":"")
+(inp[14].className=="select"?inp[14].value+"":"")
+(inp[15].className=="select"?inp[15].value+"":"")
+(inp[15].className=="select"?inp[15].value+"":"")
+(inp[16].className=="select"?inp[16].value+"":"")
+(inp[17].className=="select"?inp[17].value+"":"")
+(inp[18].className=="select"?inp[18].value+"":"")
+(inp[19].className=="select"?inp[19].value+"":"")
+(inp[20].className=="select"?inp[20].value+"":"")
+(inp[21].className=="select"?inp[21].value+"":"")
+(inp[22].className=="select"?inp[22].value+"":"")
+(inp[23].className=="select"?inp[23].value+"":"")
+(inp[24].className=="select"?inp[24].value+"":"")
+(inp[25].className=="select"?inp[25].value+"":"")
+(inp[26].className=="select"?inp[26].value+"":"")
+(inp[27].className=="select"?inp[27].value+"":"")
+(inp[28].className=="select"?inp[28].value+"":"")
+(inp[29].className=="select"?inp[29].value+"":"");
}
</script>
</body>
</html>
自渡96 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
[/quote]
问题是这样子加了以后我再删除第二个输入框的内容，那个符号还会存在啊[/quote]
+inp[2].value
+(inp[3].value!=""?"~":"")
+inp[3].value
[/quote]
能帮我补全代码吗？我按钮你的代码补全出问题了
全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<style>
.button{
width: 14%;
height: 45px;
}
.select{background: #aab1ff;}
input{vertical-align: top;}
</style>
</head>
<body>
<div id="content" style="margin: 20px">
<div>
<legend></legend><br />
<div style="height: 45px;line-height: 45px;">
<input class="button" type="button" value="按钮1" style="width: 14%;height: 45px">
<input class="button" type="button" value="按钮3" style="width: 14%;height: 45px">
<input class="number button" type="text" style="width: 15%;height: 40px">~
<input class="number button" type="text" style="width: 15%;height: 40px">
<input class="button" type="button" value="按钮2" style="width: 14%;height: 45px">
<input class="button" type="button" value="按钮4" style="width: 14%;height: 45px">
</div>
<div style="height: 45px;line-height: 45px;margin-top: 10px">
<input type="button" value="按钮5" class="button">
<input type="button" value="按钮7" class="button">
<input class="number button" type="text" style="width: 15%;height: 40px;margin-right: 3px" >-
<input class="number button" type="text" style="width: 15%;height: 40px;margin-left: 3px">
<input type="button" value="按钮6" class="button">
<input type="button" value="按钮8" class="button">
</div>
</div>
<hr style="margin: 20px 0">
<div style="margin: 10px 0">
<legend></legend><br />
<div>
<input type="button" value="负" class="button"> ：
<input type="button" value="一" class="button">
<input type="button" value="二" class="button">
<input type="button" value="三" class="button">
<input type="button" value="四" class="button">
<input type="button" value="五" class="button">
</div>
</div>
<hr style="margin: 20px 0">
<div>
<legend>常用词库：</legend><br />
<input type="button" value="一" class="button">
<input type="button" value="二" class="button">
<input type="button" value="三" class="button">
<input type="button" value="四" class="button">
<br/>
<input type="button" value="五" class="button">
<input type="button" value="六" class="button">
<input type="button" value="七" class="button">
<input type="button" value="八" class="button">
<input type="button" value="九" class="button">
<br/>
<input type="button" value="十" class="button">
<input type="button" value="十一" class="button" style="width: 20%; height:45px">
<input type="button" value="十二" class="button" style="width: 20%; height:45px">
<input type="button" value="十三" class="button" style="width: 20%; height:45px">
</div>
<hr style="margin: 20px 0">
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
</body>
</html>
自渡96 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
[/quote]
问题是这样子加了以后我再删除第二个输入框的内容，那个符号还会存在啊[/quote]
+inp[2].value
+(inp[3].value!=""?"~":"")
+inp[3].value
[/quote]
完美了，谢谢
天际的海浪 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
[/quote]
问题是这样子加了以后我再删除第二个输入框的内容，那个符号还会存在啊[/quote]
+inp[2].value
+(inp[3].value!=""?"~":"")
+inp[3].value
自渡96 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
[/quote]
问题是这样子加了以后我再删除第二个输入框的内容，那个符号还会存在啊
天际的海浪 2017-11-17
- 打赏
- 举报
你自己加上啊，拼接字符串还不会么？
+inp[2].value
+"~"
+inp[3].value
自渡96 2017-11-17
- 打赏
- 举报
[quote=引用 3 楼 jslang 的回复:]
[code=javascript]
能不能在帮我加个功能啊。不是有两个输入框吗？我想在第二个输入框输入的内容前面加上"-"这个符号，显示在下面的输出框中
可能我说的不好，你没办法理解，我举个例子：比如我现在按 按钮1并在第一个输入框输入22，再在第二个输入框输入999，那么输出框的结果就是按钮1 22-999
天际的海浪 2017-11-17
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
.select {
background-color: #fdd;
}
</style>
</head>
<body>
<div id="content" style="margin: 20px">
<div>
<div id="box">
<input type="button" value="按钮1" style="width: 14%;height: 45px" onclick="gre(this)">
<input type="button" value="按钮3" style="width: 14%;height: 45px" onclick="gre(this)">
<input type="text" style="width: 15%;height: 35px" onkeyup="setout()" >~
<input type="text" style="width: 15%;height: 35px" onkeyup="setout()" >
<input type="button" value="按钮2" style="width: 14%;height: 45px" onclick="gre(this)">
<input type="button" value="按钮4" style="width: 14%;height: 45px" onclick="gre(this)">
</div>
<div>
<legend>输出结果：</legend><br />
<input type="text" style="width: 99% ;height: 30px" id="text" value="">
<input type="button" value="确定" style="width: 100% ;height: 40px;margin-top: 10px">
</div>
</div>
<script type="text/javascript">
function gre(t) {
t.className = t.className==""?"select":"";
setout();
}
function setout() {
var inp = document.getElementById("box").getElementsByTagName("input");
document.getElementById("text").value = (inp[0].className=="select"?inp[0].value:"")
+(inp[1].className=="select"?inp[1].value:"")
+inp[2].value
+inp[3].value
+(inp[4].className=="select"?inp[4].value:"")
+(inp[5].className=="select"?inp[5].value:"");
}
</script>
</body>
</html>
Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）
