选择/突出显示行并更改同一行中突出显示的文本字段的值（续）

时间：2013-09-24 20:58:14

标签： javascript select text input highlight

这是项目之前的延续，见此处（Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row）。用户Scription非常有帮助。谢谢！

让我按照我需要的方式工作的下一个业务是让菜单中的第四个选项可以通过onClick进行编辑，但其方式与上面的选项不同，它需要一组不同的选项。此行的选项仅涉及更改文本，并且不以任何方式涉及数字。我已经想出如何通过onClick从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>

更新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>

1 个答案:

答案 0 :(得分：0)

我终于明白你的意思了。 为了实现这一点，您必须为每个输入框添加一个新属性

  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;
}

我创建了一个有效的工作人员example

我希望能满足您的需求。 如果这个答案对您有帮助，请将其标记为有用的答案。

相关问题
最新问题