CODEWITHSUNDEEP
htmlcss
Durga
Durga

Reputation: 65

how to show and hide textbox-border

In table I have 1 column in which text-box is given so that user can edit text in that as per their need ,edited text is getting saved onkeyup properly but i want to hide text-box border ,or i can say after editing text text-box should not be visible ,only the edited text should be visible ,and if user again wants to edit than user should be able to see that text-box when user click on text again,something like this I want textbox effect like this,and i don't want to use jquery,how can i do this

here is my code for textbox

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

onkeyup function

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){
      }
    });
}

Upvotes: 2

Views: 20410

Answers (1)

Ali Bassam
Ali Bassam

Reputation: 9969

To Hide the Border you can use Javascript. onblur event is what you need, onblur means when you remove focus from this input, either by clicking outside of it, or by pressing TAB to give focus to another element.

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

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

Then when the user clicks back on it, you can use onfocus.

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

UPDATE

<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";
}

As Fiona T suggested, you can do this in CSS (better solution).

Give your input a class.

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

Then in CSS:

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

However, I suggest that you don't hide and show the border, because the size of the input may vary, you are technically removing the border which would be 1px,2px,3px...

So change the color instead of that, if your background is white, then...

.myInput
{
   border-color:#FFFFFF;
}
.myInput:hover
{
   border-color:#000000;
}
.myInput:focus
{
   border-color:#000000;
}

Upvotes: 4

Related Questions