我可以使用css隐藏文本框的克拉吗？

Question

我知道有很多理由不这样做，但我真的需要。我正在使用Jquery UI datepicker，我设计了一个文本框，看起来像一个超链接。无论如何，一切都很好，除了当我点击文本框时它有闪烁的克拉。有没有办法摆脱它？

Answer 1

使用隐藏的input并显示a。点击a后会触发input焦点。

<强> Example on jsFiddle

HTML

<input id="i" type="text" value="select date" />
<a id="open" href="#">select date</a>

JS

$("#open").click(function(e){
    e.preventDefault();
    $("#i").trigger("focus");
});

$("#i").focus(function(){
    alert("Open datapicker");
});

不是CSS解决方案，但这是一种方法......

Answer 2

    function makeCaretInvisible(textboxId) {

  var inputBox = document.getElementById(textboxId);

  var outputBox = inputBox.cloneNode(true);

  outputBox.id=outputBox.name='';

  outputBox.onclick=function(){
    inputBox.setSelectionRange(outputBox.selectionStart, outputBox.selectionEnd);
  };

  inputBox.onkeyup=function(){
    outputBox.value=inputBox.value;
  };

  inputBox.parentElement.insertBefore(outputBox, inputBox);

  inputBox.style.position='absolute';
  inputBox.style.top='-10000px';

}​

http://jsbin.com/ihobe4/edit

Answer 3

如何使用隐藏的input和<a>来避免所有问题？

HTML：

<div>
    <a href="#" id="cal_link">select date</a>    
    <input type="hidden" id="cal" />
</div>

JavaScript的：

$("#cal").datepicker({
    buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
    buttonImageOnly: true,
    showOn: 'button'
});
$("#cal_link").click(function() {
    $("#cal").datepicker("show");
});

尝试一下（显然，您可以设置<div>的样式并使用您想要的任何buttonImage：http://jsfiddle.net/s5e6k/