cuando caja de texto cambiado el texto se actualiza automáticamente 6 cuadros de texto siguientes

StackOverflow https://stackoverflow.com/questions/2815582

Pregunta

Tengo 7 cuadros de texto. Si Top 1 cuadro de texto ( Volumen Todos los años ) cambió el texto, necesidad texto que se actualiza en el próximo 6 inputboxes ( Últimas 2009 Volumen al último 2014 Volumen ). Me necesita tener Javascript o Jquery para esto. Voy a escribir Js TextChanged () o focuschange () para subir 1 caja de texto. Entonces, ¿qué debo escribir en focuschage () o los métodos TextChanged ()

<tr id="row12_136" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Volume All Years</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_136" type="text" maxlength="255" id="12_136" tabindex="61" title="Volume All Years" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                    </td>
                </tr><tr id="row12_60" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2009 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_60" type="text" maxlength="255" id="12_60" tabindex="62" title="Latest 2009 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_60" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl47" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_61" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2010 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_61" type="text" maxlength="255" id="12_61" tabindex="63" title="Latest 2010 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_61" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl48" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_62" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2011 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_62" type="text" maxlength="255" id="12_62" tabindex="64" title="Latest 2011 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_62" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl49" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_63" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2012 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_63" type="text" maxlength="255" id="12_63" tabindex="65" title="Latest 2012 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_63" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl50" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_64" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2013 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_64" type="text" maxlength="255" id="12_64" tabindex="66" title="Latest 2013 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_64" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl51" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_65" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2014 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_65" type="text" maxlength="255" id="12_65" tabindex="67" title="Latest 2014 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_65" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl52" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
¿Fue útil?

Solución

Con eso html, y donde #foo es un selector a cero en la tabla correspondiente:

$('tr.RegText input:eq(0)').change(function() {
  $('tr.RegText input:gt(0):lt(7)').val($(this).val());
});

Esto supone que el cambio en la falta de definición del primer campo de entrada es aceptable. Cambio a keyUp o lo que sea a gusto.

Otros consejos

usando jQuery:

$("#12_136").keyup(function(){
  var $myVal = $("#12_136").val();
  for(var i = 0; i < 6; i ++) {
    $("#12_6"+i).val($myVal);
  }
});

Caída de su evento de pulsación de tecla en línea en el código HTML. Puede asociar controladores de eventos fácilmente en tiempo de ejecución.

Con jQuery se puede hacer con esto. Estoy usando "onchange". No creo que hay que hacer esto a un nivel de presión de tecla.

$(document).ready(function() { init() })


function init() {     
     $('#12_136').change(function() {
          var myVal = $(this).attr('value')
          $(this).parents('table').find('input').attr('value',"#" + myVal + "#" )
     })
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top