Question

我正在尝试使用下面的代码

创建所有span的文本，就像占位符文本一样

function placehodertype() {
   //alert((this.textContent || this.innerText));
    var textval=(this.textContent || this.innerText);
   if(textval=="Click and type!")
    {
        $(this).text("");
        $(this).focus();
    }
    $(this).blur(function(){

        alert();
        var textval2 =(this.textContent || this.innerText);

        //textval2 = textval2.length;
            alert(textval2);
        if(textval2=="")
         {
        $(this).text("Click and type!");
        //$(this).focus();
         }

    });
}

var spans = document.getElementsByTagName('span');
for (var i = 0, len = spans.length; i < len; i++) {
    spans[i].onclick = placehodertype;
}

它的工作正常，但当用户点击跨度并点击外部而没有输入任何内容时，该跨度将消失。为避免此问题，我使用 blur（）获取该跨度文本值，但其显示为undefined错误！

点击此处查看我的代码：http://jsfiddle.net/Manivasagam/EHhbH/29/

为什么我得到这个？我希望有人会更新我的代码。

Answer 1

    $(document).ready(function() {
      for (var i = 1; i <= 3; i++) {
        var span = document.createElement('div');
        span.idName = "editableid";
        span.innerHTML = ['<br><span style="color:red" class="insidespan" contenteditable="true" >Click and type!</span> '].join('<br> ');
        document.getElementById('placeHere').insertBefore(span, null);
      }

      $('#placeHere span.insidespan').on('click', function() {
        var textval = $(this).text();
        if (textval == "Click and type!") {
          $(this).text("");
          $(this).focus();
        }
      }).on('blur', function() {
        var textval = $(this).text();
        if (textval == "") {
          $(this).text("Click and type!");
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="placeHere"></div>

由于您已经在使用jQuery，因此您只需使用

即可

$('span').on('click', placehodertype);

而不是

var spans = document.getElementsByTagName('span');
for (var i = 0, len = spans.length; i < len; i++) {
    spans[i].onclick = placehodertype;
}

您完成的实现可以写成

$('span')
    .on('click', function() {
        var textval = $(this).text();
        if (textval == "Click and type!") {
            $(this).text("");
            $(this).focus();
        }
    })
    .on('blur', function() {
        var textval = $(this).text();
        if (textval == "") {
            $(this).text("Click and type!");
        }
    });

Answer 2

本机Javascript代码和jQuery之间存在很大的混乱。试试这个解决方案：

<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                for(var i=1;i<=3;i++) {
                    var $span = $('<span style="color:red" class="insidespan" contenteditable="true">Click and type!</span>');
                    $('#placeHere').append($span).append('<br/>');

                    $span.click(function(){
                        $(this).text('');
                    })
                    .blur(function() {
                        if($(this).text() == "") {
                            $(this).text("Click and type!");
                        }
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="placeHere">
        </div>
    </body>
</html>

我无法在模糊功能中获得跨度值

2 个答案: