1

我有这样的html表

<table width="100%">
    <tr>
        <td align="right">
             Email Address
        </td>
        <td  align="left">
            <div>
                <input type="email" data-theme="b" id="EmailAddress" />
            </div>
        </td>
    </tr>
</table>

现在我在 td 内的 div 内有一个输入，当我在输入内单击时，光标设置在文本框上，但是如果我单击输入的边框有时光标设置在 td 的开头但不在输入处 在此处输入图像描述

4

4 回答 4

1

嘿，伙计们，我终于找到了一个解决方案，我已将名称设置为表单中的第一个输入，然后在单击任何 td“仅在 td 边框上”时，我已将焦点放在第一个输入上

 $('td:has("input")').live('click', function () {
        try {
            var res = $(event.srcElement).attr('type');
            if (res == null) {
                var _input = document.getElementsByName("ToFocus")[0];
                _input.focus();
            }

        } catch (e) {
        }
    });

因此，在此代码之后，当问题发生时，它会让您专注于第一个输入:)

于 2013-01-02T14:19:18.797 回答
1

我不确定为什么会发生这种情况，因为这是我以前从未遇到过的行为（并且没有提供用于测试的演示），但是一个快速的解决方法，因为无论如何您都在使用 jQuery：

$('td:has("input")').on('focus', function(){
     $(this).find('input').focus();
});

实际上，当focus事件发生在td包含input元素的元素上时，该input元素被聚焦，因此光标应该出现在 .input而不是td. 可能值得用 替换focus，click具体取决于正在发生的事情。

于 2013-01-01T12:26:39.983 回答
0

问题在于您使用了border-radius，或者更确切地说，是您分配给它的值。

你可以在这里自己弄乱它：http: //jsfiddle.net/UN44W/1/

长话短说，即使您的边框曲线使用 CSS3，浏览器仍然将输入字段的实际空间视为正方形（更具体地说，是正方形角）。边界曲线越窄，左侧的光标就越明显，看起来像是溢出到实际输入之外（即使不是）。

结论：您对此无能为力（我知道），因为 CSS 只是设计的面具，而不是功能。半径的值可能为 10px；5px 稍微好一点，看起来不那么明显。

input {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; 
        border:1px solid black;
    }
于 2013-01-01T14:00:16.823 回答
0

问题不在于 td，而在于输入方式！您的输入似乎是 moz-bordered... 因此，例如，如果边框半径为 5px，请在输入字段中添加 5px 填充，如下所示：

通过 CSS

input {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; 
/*add this*/
       padding-left:5px;
       padding-right:5px;
    }

通过jQuery

$(document).ready(function(){
      $('div input').css('padding','0 5px');
 });
于 2013-01-02T15:04:12.817 回答