選擇/突出顯示行並更改同一行中突出顯示的文本字段的值（續）

這是此前項目的延續，見此處（Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row）。用戶定製非常有幫助。謝謝！選擇/突出顯示行並更改同一行中突出顯示的文本字段的值（續）

爲了讓我的工作順利進行，我需要它的下一行工作就是讓菜單中的第四個選項通過onClick進行編輯，但與上面的選項不同，因爲它需要一組不同的選項。此行的選項只涉及更改文本，並不涉及任何方式的數字。我已經想出瞭如何通過onover從另一個線程在stackoverflow上更改文本，但我現在需要將其集成到我現有的設計中。我有Plunker去（下面的鏈接）。正如你所看到的，我可以通過使用放在包裝器下面的小按鈕來進行測試，從而得到第四個選項行的文本來改變沒有問題。我需要這個能夠在高亮顯示時進行調整，並且可以使用現有的D-pad左/右箭頭 - 與其他線路一樣。顯然，這些值也需要根據按下哪個按鈕來增加和減少。文本短語從一個地方開始並結束於另一個地方，因此onClick事件需要依次循環。

爲了使項目更加複雜或增加，我需要能夠讓用戶向下滾動到「更多↓」選項，然後進入全新的選項/選項窗口。我會想象我們會沿着CSS overflow：property的方式使用某些東西，但是當將它與所有這些代碼結合使用時，我不太確定如何解決這個問題。

一如既往，任何幫助表示讚賞！

這裏花掉它：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 &#176;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&#58;1" id="number3">--></li> 
<li style="text-align: right">more &#8595;</li> 
</ul> 
</div> 

<div id="d-pad"> 
<div id="up"><p>&#9650</div><div id="down"><p>&#9660</div> 
<div id="left" onclick="decrementValue()"><p>&#9668;</p></div><div id="right" onclick="incrementValue()"><p>&#9658;</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();">&#9658;</button> 


</body> 
</html>

UPDATE 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 &#176;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 &#8595;</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>

來源

2013-09-24 Brett Roby

因此SO需要您的問題中的代碼，而不僅僅是在第三方網站上。 – isherwood

↑謝謝。代碼越來越長，所以我不知道禮儀是什麼樣的情況下，我們有這麼多的情況。我會一直把我的代碼從這裏發佈出去...... –

任何想法，傢伙？ –

我終於明白你的意思。爲了做到這一點，你必須添加到每個輸入框一個新的屬性

onfocus="DoSomething()"

這樣最終的結果會是什麼樣子

<input onfocus="FocusStripe(0)" class="number-input" type="number" min="0" max="80" value="0" id="number0" ">

雖然數字0套件的第一個框，第二個盒子的第一套房等等。

然後，我們必須寫一個新的功能如下：

function FocusStripe(stripeID) { 
    var sel = document.getElementById('screen-container').getElementsByTagName('li'); 
    sel[stripeID].style.backgroundColor = '0871b9'; 
    sel[SBoxPtr].style.backgroundColor = '6acff6'; 
    SBoxPtr = stripeID; 
}

我創建了一個工作plnker example

我希望回答您的需求。如果這個答案幫助你，請將其標記爲一個有用的答案。

來源

2013-10-02 06:33:50 Scription

謝謝你爲我工作。對此，我真的非常感激。不過，我仍然有點虧損。它似乎沒有在我的電腦上工作。它仍然像以前一樣工作。我如何得到它，以便文本句子循環通過？就像現在一樣，D-pad不會這樣做（在Safari和Chrome中）。理想的情況是數字輸入字段不在那裏，因爲在真實的界面中沒有數字。這只是幾個文本選項。我在演示中包含了文本選項。 –

我扔了一個快速的Plunker，所以你可以看到+箭頭應該做什麼：http://plnkr.co/edit/3GSVES63BsJUusfK1aMr?p=preview。我相信這有助於說明我希望發生的事情。當然，這隻會在行被突出顯示時發生。我只是把它放在一起，所以你可以看到行動。 –

如果我以前的答案幫助你，請標記爲有幫助。這是我現在可以做的最好的。 – Scription

選擇/突出顯示行並更改同一行中突出顯示的文本字段的值（續）

回答

相關問題