[英]Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row (continued)
這是之前項目的延續，請參見此處（ 選擇/突出顯示行並更改同一行中突出顯示的文本字段的值 ）。 用戶腳本非常有用。 謝謝！
使此功能按我需要的方式工作的下一個業務是使其具有功能，以便可以通過onClick來編輯菜單中的第四個選項，但是與上面的選項不同，因為它需要一個不同的選項集。 此行的選項僅涉及更改文本，並且不以任何方式涉及數字。 我已經弄清楚了如何通過onClick從stackoverflow上的另一個線程更改文本，但是現在我需要將其集成到現有設計中。 我已經准備好了（下面的鏈接）。 如您所見，我可以使用放在包裝器下方的小按鈕來進行測試，從而使第四選項行的文本保持不變。 我需要僅在高亮顯示時使用現有的D-pad左/右箭頭進行調整，這與其他線條一樣。 顯然，這些值也需要根據按下哪個按鈕來增加和減少。 文本短語從一個位置開始，然后在另一個位置結束，因此onClick事件需要按順序循環遍歷它們。
為了進一步使項目復雜化或添加到項目中，我需要使用戶向下滾動到“ more↓”選項，然后滾動到一個全新的選項集/窗口中。 我想我們會沿CSSoverflow：屬性使用一些東西，但是當將它與所有這些代碼結合時，我真的不確定如何實現它。
一如既往，我們將不勝感激！
在這里插入： http ://plnkr.co/edit/LarWS7qNrl0zXbRNaPS0?p=preview
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
/* Colors for later: 6acff6 6799ea cyan */
body {
font-family: arial, helvetica, sans-serif;
font-size: 1.7em;
}
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6acff6;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
overflow: hidden;
}
#screen-container h1 {
margin: 15px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 1em;
font-weight: 100;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 5px 10px 0 -35px;
text-transform: uppercase;
}
li {
list-style-type: none;
line-height: 50px;
padding: 0 10px 0 10px;
}
li:selected {
color: #000;
}
.number-input {
float: right;
width: 50px;
height: 40px;
font-size: 1em;
text-align: right;
color: #ffffff;
background-color: transparent;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
font-size: .65em;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = '0871b9'; }
else { sel[i].style.backgroundColor = '6acff6'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){
SBoxPrevNext(-1);
};
document.getElementById("down").onclick=function(){
SBoxPrevNext(1);
};
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number'+ SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<h1>Program Menu</h1>
<ul>
<li>Program Number <input class="number-input" type="number" min="0" max="80" value="0" id="number0"></li>
<li>Etch Time Sec <input class="number-input" type="number" min="0" max="80" value="0" id="number1"></li>
<li>Etch Temp °C <input class="number-input" type="number" min="20" max="100" value="20" id="number2"></li>
<li id="program-type">Pulse HNO3 <!--<input class="number-input" type="text" min="0" max="80" value="3:1" id="number3">--></li>
<li style="text-align: right">more ↓</li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>▲</div><div id="down"><p>▼</div>
<div id="left" onclick="decrementValue()"><p>◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
<script type="text/javascript">
var nextWord = (function() {
var wordArray = ['Pulse Mix N:S 6:1','Pulse Mix N:S 5:1','Pulse Mix N:S 4:1','Pulse Mix N:S 3:1','Pulse Mix N:S 2:1','Pulse Mix N:S 1:1','Vortex HNO3','Vortex Mix N:S 6:1','Vortex Mix N:S 5:1','Vortex Mix N:S 4:1','Vortex Mix N:S 3:1','Vortex Mix N:S 2:1','Vortex Mix N:S 1:1','Pulse H2SO4','Pulse Mix S:N 1:1','Pulse Mix S:N 2:1','Pulse Mix S:N 3:1','Pulse Mix S:N 4:1','Pulse Mix S:N 5:1','Pulse Mix S:N 6:1'];
var count = -1;
return function() {
return wordArray[++count % wordArray.length];
}
}());
</script>
<button onclick="document.getElementById('program-type').innerHTML = nextWord();">►</button>
</body>
</html>
更新2013-09-27
我已經更新了代碼並越來越接近，但是被卡在這里： http : //plnkr.co/edit/iZOJAx8BmKVMX8zII4kk?p=preview 。 我正在和第四排戰斗。 只是效果不佳。 當我使用鍵盤調整數字時，我可以更改值並顯示適當的文本，但是當D-pad上的onClick更改為該值時，它不起作用。 使用D-pad進行操作時，不會更改文本。 我認為這與代碼中的“ keyup”調用有關，但是我放在其中的任何內容（onBlur，onFocus等）似乎都沒有用。
我當前的設置遠非優雅，因此，任何有關如何清理該混亂的建議都將不勝感激。 我敢肯定，有一種簡單的方法可以完成相同的任務，但這就是我利用已有的知識和想到的想法所構想的。 完整的代碼可以在下面看到。 請原諒相對鏈接，因為這些鏈接是從我的實際文件中復制的（我現在開始整理界面，因此我在許多元素上使用了圖形）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="font-collection.css">
<style type="text/css">
/* Colors for later: 6acff6 6799ea cyan */
body {
font-size: 1.7em;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #6393c1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#6393c1 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#6393c1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
font-family: arial, helvetica, sans-serif;
padding: 10px;
}
h1 {
margin: 0 0 20px 20px;
font-size: 1.75em;
font-family: "alright-light","century gothic";
font-variant: small-caps;
font-weight: 100;
color: #427abd;
}
#wrapper {
width: 1150px;
height: 850px;
margin: 0 auto;
padding: 15px;
background-color: #fafafa;
border: 1px solid #474747;
border-radius: 10px;
}
#keypad-body {
margin: 0 auto;
width: 1082px;
height: 670px;
padding: 0px;
background-color: #b3b5b8;
border: 1px solid #474747;
border-radius: 10px;
}
#screen-container {
float: left;
margin: 90px 0 0 80px;
background: #6acff6;
width: 400px;
height: 220px;
border: 3px solid #d3d3d3;
border-radius: 15px;
color: #ffffff;
overflow: hidden;
}
#screen-container h1 {
margin: 15px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 1em;
font-weight: 100;
font-family: arial, helvetica, sans-serif;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
margin: 80px 100px 0 0;
width: 432px;
height: 336px;
background-color: #b3b5b8;
border: 0px solid #d3d3d3;
}
ul {
margin: 5px 10px 0 -35px;
text-transform: uppercase;
font-size: .9em;
}
li {
list-style-type: none;
line-height: 32px;
padding: 0 10px 0 10px;
}
li:selected {
color: #000;
}
.number-input {
float: right;
width: 50px;
height: 30px;
font-size: 1em;
text-align: right;
color: #ffffff;
background-color: transparent;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
#up {
background: url(images/keypad-graphic-button-up.png);
background-repeat: no-repeat;
position: absolute;
margin: 30px 0 0 0;
left: 170px;
width: 90px;
height: 77px;
background-color: transparent;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
font-size: .65em;
}
#down {
background: url(images/keypad-graphic-button-down.png);
background-repeat: no-repeat;
position: absolute;
margin: 0 0 30px 0;
bottom: 0;
left: 170px;
width: 90px;
height: 77px;
background-color: transparent;
cursor: s-resize;
}
#left {
background: url(images/keypad-graphic-button-minus.png);
background-repeat: no-repeat;
background-position: 10px;
position: absolute;
left: 30px;
top: 130px;
width: 62px;
height: 64px;
margin: 5px;
background-color: transparent;
cursor: w-resize;
}
#right {
background: url(images/keypad-graphic-button-plus.png);
background-repeat: no-repeat;
position: absolute;
right: 10px;
top: 130px;
width: 62px;
height: 64px;
margin: 5px;
background-color: #transparent;
cursor: e-resize;
}
#start {
background: url(images/keypad-graphic-button-start.png);
background-repeat: no-repeat;
position: absolute;
left: 133px;
top: 140px;
width: 181px;
height: 54px;
background-color: #transparent;
cursor: e-resize;
text-align: center;
}
#stop {
background: url(images/keypad-graphic-button-stop.png);
background-repeat: no-repeat;
position: relative;
float: right;
margin: 30px 100px 0 0;
width: 432px;
height: 66px;
border: 0px solid #d3d3d3;
background-color: transparent;
text-align: center;
}
#ntg-logo {
background: url(images/keypad-graphic-ntg-logo.png);
background-repeat: no-repeat;
margin: 25px auto;
width: 320px;
height: 116px;
}
#jetetch-pro-logo {
background: url(images/keypad-graphic-jetetch-pro-logo.png);
background-repeat: no-repeat;
margin: -70px 0 0 120px;
float: left;
width: 302px;
height: 151px;
}
#up, #down, #left, #right, #start, #stop {
border: 1px solid #000000;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
input.button {
font-family: trajan;
width: auto;
margin: 0px;
padding: 10px;
border: 0px;
color: #4378bd;
background-color: #efefef;
font-size: .75em;
text-transform: uppercase;
font-weight: 900;
}
input.button:hover {
color: #ffffff;
background-color: #858585;
}
.button {
width: auto;
padding: 5px;
border: 1px solid #4378bd;
border-radius: 5px;
font-size: .6em;
}
.clear {
clear: both;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = '0871b9'; }
else { sel[i].style.backgroundColor = '6acff6'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){
SBoxPrevNext(-1);
};
document.getElementById("down").onclick=function(){
SBoxPrevNext(1);
};
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number'+ SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number'+ SBoxPtr).value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<h1>Virtual Keypad</h1>
<div id="keypad-body">
<div id="screen-container">
<h1>Program Menu</h1>
<form method="post" id="keypad">
<ul>
<li>Program Number <input class="number-input" type="number" min="0" max="80" value="0" id="number0"></li>
<li>Etch Time Sec <input class="number-input" type="number" min="0" max="80" value="0" id="number1"></li>
<li>Etch Temp °C <input class="number-input" type="number" min="20" max="100" value="20" id="number2"></li>
<li><input class="number-input program-type" type="text" min="0" max="80" value="1" id="number3">
<span class="text0">Pulse HNO3</span>
<span class="text1">Pulse HNO3</span>
<span class="text2">Pulse Mix N:S 6:1</span>
<span class="text3">Pulse Mix N:S 5:1</span>
<span class="text4">Pulse Mix N:S 4:1</span>
<span class="text5">Pulse Mix N:S 3:1</span>
<span class="text6">Pulse Mix N:S 2:1</span>
<span class="text7">Pulse Mix N:S 1:1</span>help</li>
<li style="text-align: right">more ↓</li>
</ul>
</div>
<div id="d-pad">
<div id="up"></div><div id="down"></div>
<div id="left" onclick="decrementValue()"></p></div><div id="start"></div><div id="right" onclick="incrementValue()"></div>
</div>
<div class="clear"></div>
<div id="stop"><a href="javascript:document.getElementById('keypad').reset();"></a></div>
<div id="jetetch-pro-logo"></div>
<div class="clear"></div>
<div id="ntg-logo"></div>
</div><!-- end keypad body -->
<center>
<br><br><form method="post">
<input class="button" type="button" value="Close Window"
onclick="window.close()">
</form>
</center>
</div><!-- end wrapper -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var span = $('.text0').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 0) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text1').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 1) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text2').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 2) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text3').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 3) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text4').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 4) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text5').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 5) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text6').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 6) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
//<![CDATA[
$(window).load(function(){
var span = $('.text7').hide();
$('.program-type').keyup(function() {
var value = this.value;
if (value == 7) {
span.fadeIn();
} else {
span.fadeOut();
}
});
});//]]>
</script>
</body>
</html>
我終於明白了你的意思。 為了實現這一點，您必須在每個輸入框中添加一個新屬性
onfocus="DoSomething()"
這樣最終結果看起來像
<input onfocus="FocusStripe(0)" class="number-input" type="number" min="0" max="80" value="0" id="number0" ">
數字0套件用於第一個框，數字1套件用於第二個框，依此類推。
然后我們必須編寫一個新函數，如下所示：
function FocusStripe(stripeID) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
sel[stripeID].style.backgroundColor = '0871b9';
sel[SBoxPtr].style.backgroundColor = '6acff6';
SBoxPtr = stripeID;
}
我創建了一個有效的plnker 示例
希望能滿足您的需求。 如果此答案對您有幫助，請將其標記為有用的答案。
選擇/突出顯示行並更改同一行中突出顯示的文本字段的值
[英]Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row
在DIV中選擇文本，突出顯示文本時更改按鈕（未突出顯示時取消選擇）
[英]Selecting text within a DIV, changing button when text is highlighted (deselect when its unhighlighted)
當第二行文本字段與第一行文本字段具有相同的值時，如何警告錯誤
[英]How to alert error when second row text field has same value with first row text field
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.