Question

在表格中我有1列，其中给出了文本框，以便用户可以根据需要编辑文本，编辑后的文本正在保存onkeyup但我想隐藏文本框边框，或者我可以说在编辑文本后，文本框不应该是可见的，只有编辑过的文本应该是可见的，如果用户再次想要编辑，用户应该能够在用户再次点击文本时看到该文本框，类似于这个I want textbox effect like this，我不想使用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){
      }
    });
}

Answer 1

要隐藏边框，您可以使用Javascript。 onblur事件就是您所需要的，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;
}

如何显示和隐藏文本框边框

onkeyup功能

1 个答案: