编辑文本字段的按钮。将 jQuery 添加到组合中答案

【问题标题】：A button that edits a text field. Adding jQuery to the mix编辑文本字段的按钮。将 jQuery 添加到组合中
【发布时间】：2012-08-09 11:27:04
【问题描述】：

我的屏幕键盘工作正常已有一段时间了。

我最近不得不将jQuery 添加到系统中，现在它不再工作了。按下按钮没有任何作用，因为按下按钮时文本输入不再具有焦点，并且我无法从我的 jscript 重新关注它。

输入html（注意使用优秀的jq_watermark——我需要jQuery的原因）：

<input class="search jq_watermark" id="barcode" name="barcode" type="text" title="Please enter search criteria."/>

这是其中一个按钮的 html：

<td onclick="addChar('Q')"><button class="osk" id="Key_Q" value="Q">Q</button></td>

这是 addChar 脚本。请注意，许多尝试聚焦该领域，现在都失败了 jQuery 存在：

// The field the keyboard should edit.
field = document.forms['main'].elements.item('barcode');

function addChar(c) {
  console.log("Char("+c+")");
  field.focus();
  if(field.maxLength == -1 || field.value.length < field.maxLength) {
    // Handle different browsers.
    if (field.selectionStart || field.selectionStart == '0') {
      var start = field.value.substr(0,field.selectionStart);
      var end = field.value.substr(field.selectionEnd,field.length);
      field.value = start + c + end;
    } else if (document.selection) {
      field.focus();
      var range = document.selection.createRange();
      range.text = c;
      range.moveStart('textedit',1);
      range.select();
    } else {
      field.value = field.value + c;
    }
    field.focus();
  }
  return false;
}

我必须添加这个来阻止按钮提交表单。我怀疑这是我需要放新东西的地方，但对 jQuery 来说是新手，我不知道是什么：

$("button.osk").click(function(event){
  // Stop it submitting in case the keyboard is inside a form.
  event.preventDefault();
});

附：我知道周围有整洁的 jQuery 弹出式键盘，我很想用他们的替换我的，但现在这不是一个选择。

【问题讨论】：

标签： jquery button input

【解决方案1】：

使用 Jquery 时，必须将所有 jquery 脚本放在以下之间：

<script>
   $(document).ready(function()){
     //your jquery stuff here
   });
</script>

我这么说的唯一原因是您没有提供所有代码。是否可以在 jsFiddle.net 或类似的东西上提供基础知识，以便有人可以为您测试它。

【讨论】：

【解决方案2】：

问题解决了：

看来问题出在这里：

field = document.forms['main'].elements.item('barcode');

显然 jQuery 的到来使得这行不通。我暂时将其替换为：

var field;
$(document).ready(function(){
   field = document.forms['main'].elements['barcode'];
});

请注意，我将它包装在 ready 函数中，而不是通过 items 访问它。这在 IE8 中不起作用。我必须解决这个问题。

【讨论】：