comment afficher et masquer la zone de texte-frontière

Dans le tableau j'ai 1 colonne dans laquelle la boîte à textes est donnée afin que l'utilisateur puisse modifier le texte en ce que par leur besoin ,texte édité est sauvés onkeyup correctement, mais je veux cacher la boîte à textes de la frontière ,ou je peux dire après l'édition de texte zone de texte ne doit pas être visible ,seul le texte édité doit être visible ,et si l'utilisateur veut modifier que l'utilisateur doit être en mesure de voir que la zone de texte lorsque l'utilisateur clic sur le texte à nouveau,quelque chose comme ce Je veux textbox effet comme ceci,et je ne veux pas utiliser jquery,comment puis-je faire cela

voici mon code pour la zone de texte

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

onkeyup fonction

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){
      }
    });
}
InformationsquelleAutor Durga | 2013-01-24
  1. 3

    Pour Masquer la Frontière, vous pouvez utiliser du Javascript. onblur événement est ce qu'il vous faut, onblur signifie que lorsque vous retirez le focus à partir de cette entrée, soit en cliquant sur l'extérieur, ou en appuyant sur la touche TAB pour donner le focus à un autre élément.

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

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

    Ensuite, lorsque l'utilisateur clique sur le dos sur elle, vous pouvez utiliser onfocus.

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

    Mise à JOUR

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

    Comme Fiona T suggéré, vous pouvez le faire en CSS (meilleure solution).

    Donner à votre entrée une classe.

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

    Ensuite dans le CSS:

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

    Cependant, je vous suggère de ne pas le cacher et de montrer de la frontière, parce que la taille de l'entrée peut varier, vous êtes techniquement en retrait de la frontière qui serait 1px,2px,3px...

    Afin de changer la couleur au lieu de cela, si votre fond est blanc, alors...

    .myInput
{
   border-color:#FFFFFF;
}
.myInput:hover
{
   border-color:#000000;
}
.myInput:focus
{
   border-color:#000000;
}
    • depuis mon id est comme ça id={remark{$j}} alors, comment dois-je écrire ce que vous vous montrez dans votre code
    • Vous pouvez envoyer l'ID en paramètre, tout comme vous l'avez fait avec ONKEYUP, function(e) { var myInput = document.getElementById(e).de style; ..... etc... }
    • J'ai mis à jour ma réponse.
    • Il serait mieux de le faire avec CSS - voir stackoverflow.com/questions/7702195/... pour un exemple CSS
    • votre concept est bon ,mais je ne sais pas pourquoi il ne fonctionne pas dans mon code ,je vais essayer de trouver l'erreur et b
    • Je l'ai résolu en utilisant le css, Merci pour votre réponse :),merci également pour ce qui suggère à propos de la taille de la zone de texte

    InformationsquelleAutor Ali Bassam