Question

我有这样的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的begeining而不是输入 enter image description here

Answer 1

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

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

有效地，当focus元素包含td元素时发生input事件时，input元素会被聚焦，因此光标应该显示在input而不是td中的其他位置。可能值得用focus替换click，具体取决于发生的情况。

Answer 2

嘿伙计们，我终于找到了解决方案我已将名称设置为表单中的第一个输入然后单击任何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) {
        }
    });

所以在这段代码出现问题后，你可以专注于第一个输入：）

Answer 3

问题在于您使用 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;
    }

Answer 4

问题不是td，而是输入风格！您的输入似乎是moz-bordered ...因此，如果border-radius是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');
 });

如何禁用点击桌子的td？

4 个答案: