Question

我试图在单击链接时调用一个函数，将数据传递给下一个输入框为空的地方。这是可行的，但输入框上没有显示值，并且没有保留。

单击输入框下方的任何数字时，它将调用getno函数。该函数应该找到下一个空的输入框并输入传递的值。请帮忙。

我的代码-html和javascript-

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
  function getno(x) {
    //search for focussed input
    $('input:text').each(function() {
      if ($(this).val().length === 0) {
        $gotbox = $(this);
        $gotbox.val(x);

        return false;
      }
    });
  }
</script>

<div><input type="text" maxlength="2" value="" /></div>
<div><input type="text" maxlength="2" value="" /></div>
<div><input type="text" maxlength="2" size="1" value="" /></div>
<input type="text" maxlength="2" size="1" value="" />

<br/><br/>
<a href="" onclick="getno(1)">1</a><br/>
<a href="" onclick="getno(2)">2</a><br/>
<a href="" onclick="getno(3)">3</a><br/>
<a href="" onclick="getno(4)">4</a><br/>

Answer 1

您的问题似乎是每当您单击链接时都会重新加载页面。建议您在链接中将href属性设置为等于#，以阻止重新加载页面：

<a href="#" onclick="getno(1)">1</a><br/>
<a href="#" onclick="getno(2)">2</a><br/>
etc...

请参见下面的工作示例：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
  function getno(x) {
    //search for focussed input
    $('input:text').each(function() {
      if ($(this).val().length === 0) {
        $gotbox = $(this);
        $gotbox.val(x);
        return false;
      }

    });
  }
</script>

<div><input type="text" maxlength="2" value="" /></div>
<div><input type="text" maxlength="2" value="" /></div>
<div><input type="text" maxlength="2" size="1" value="" /></div>
<input type="text" maxlength="2" size="1" value="" />

<br/><br/>
<a href="#" onclick="getno(1)">1</a><br/>
<a href="#" onclick="getno(2)">2</a><br/>
<a href="#" onclick="getno(3)">3</a><br/>
<a href="#" onclick="getno(4)">4</a><br/>

Answer 2

您可能不应该为此使用<a>标签，因为它们会将您重定向到新页面（或刷新页面）。如果您需要使用定位标记，请按照<a href="#" onclick="getno(X)">

设置定位标记

function getno(x)
{
//search for focussed input
$('input:text').each(function(){
    if($(this).val().length === 0)
    {	
		$gotbox = $(this);
		$gotbox.val(x);		
		return false;		
    }	
});
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div><input type="text" maxlength="2"  value="" /></div>
<div><input type="text" maxlength="2"   value=""/></div>
<div><input type="text" maxlength="2" size="1"  value=""/></div>
<input type="text" maxlength="2" size="1"  value=""/>  
<br/><br/>
<p onclick="getno(1)">1</p><br/>
<p onclick="getno(2)">2</p><br/>
<p onclick="getno(3)">3</p><br/>
<p onclick="getno(4)">4</p><br/>

Answer 3

您需要防止a标签的默认行为。因此添加javascript：viod（）;作为href。

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <script type="text/javascript">
  
function getno(x)
{
//search for focussed input
$('input:text').each(function(){
    if($(this).val().length === 0)
    {
 
	
		$gotbox = $(this);
		$gotbox.val(x);
		
		return false;
		
    }
	
});
}


</script>

  <div><input type="text" maxlength="2"  value="" /></div>
<div><input type="text" maxlength="2"   value=""/></div>
<div><input type="text" maxlength="2" size="1"  value=""/></div>
<input type="text" maxlength="2" size="1"  value=""/>
  
<br/><br/>
<a href="javascript:void();" onclick="getno(1)">1</a><br/>
<a href="javascript:void();" onclick="getno(2)">2</a><br/>
<a href="javascript:void();" onclick="getno(3)">3</a><br/>
<a href="javascript:void();" onclick="getno(4)">4</a><br/>

jQuery试图将值传递给输入框，但

3 个答案: