1

表には、ユーザーが必要に応じてテキストを編集できるようにテキストボックスが指定された列が1つあり、編集されたテキストはonkeyup適切に保存されていますが、テキストボックスの境界線を非表示にしたい、またはテキストテキストを編集した後に言うことができます-ボックスは表示されない必要があり、編集されたテキストのみが表示される必要があります。ユーザーが再度編集したい場合は、ユーザーがテキストをもう一度クリックしたときにそのテキストボックスを表示できるようにする必要があります。このようなテキストボックス効果が必要です。 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を使用できます。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;
}
于 2013-01-24T07:06:53.587 に答える