1

在表中，我有 1 列，其中给出了文本框，以便用户可以根据需要在其中编辑文本，编辑的文本得到onkeyup正确保存，但我想隐藏文本框边框，或者我可以在编辑文本文本后说-box 不应该是可见的，只有编辑的文本应该是可见的，如果用户再次想要编辑，那么当用户再次点击文本时用户应该能够看到该文本框，像这样我想要这样的文本框效果，而且我不想使用 jquery，我该怎么做

这是我的文本框代码

echo "<td ><input id={remark{$j}}  type=\"text\"  onkeyup=\"writeremark(this.id,{$data_set1['eid']},{$emprid});\" value=\"{$data_set1['remark']}\" /></td>";

onkeyup 函数

function writeremark(e,eid,emprid) {
    var val=document.getElementById(e).value;
    var dataString = 'eid='+eid +'&emprid='+emprid +'&val='+val ;
    $.ajax({
        type:"POST",
        url: "updateremark.php",
        data: dataString,
        success: function(result){
      }
    });
}
4

1 回答 1

3

要隐藏边框，您可以使用 Javascript。onblurevent 是您所需要的，onblur 表示当您从该输入中移除焦点时，可以通过单击它外部，或者按 TAB 将焦点赋予另一个元素。

<input type="text" id="myInput" onblur="HideBorder()" onfocus="ShowBorder()" />

function HideBorder()
{
   var myInput = document.getElementById("myInput").style;
   myInput.borderStyle="none";
}

然后当用户再次点击它时，您可以使用onfocus.

function ShowBorder()
{
   var myInput = document.getElementById("myInput").style;
   myInput.borderStyle="solid";
}

更新

<input type="text" id="myInput" onblur="HideBorder(this.id)" onfocus="ShowBorder(this.id)" />

function HideBorder(id)
{
   var myInput = document.getElementById(id).style;
   myInput.borderStyle="none";
}

正如Fiona T建议的那样，您可以在 CSS 中执行此操作（更好的解决方案）。

给你的输入一个类。

<input type="text" class="myInput" />

然后在 CSS 中：

.myInput
{
   border-style:none;
}
.myInput:hover
{
   border-style:solid;
}
.myInput:focus
{
   border-style:solid;
}

但是，我建议您不要隐藏和显示边框，因为输入的大小可能会有所不同，从技术上讲，您正在删除边框，即 1px,2px,3px ...

所以改变颜色而不是那个，如果你的背景是白色的，那么......

.myInput
{
   border-color:#FFFFFF;
}
.myInput:hover
{
   border-color:#000000;
}
.myInput:focus
{
   border-color:#000000;
}
于 2013-01-24T07:06:53.587 回答