<p contenteditable =“ true”>清除后等于string.length 4

时间:2019-01-26 09:07:24

标签: javascript

我不希望用户能够发送空白短信。当用户清除p标记并单击send..it时,它以string.length的形式返回4,当它应为0时。我还希望用户发送一条消息并将其提醒到窗口,并将其记录在文本区域中。 / p>

代码:https://codepen.io/CandidSpace/pen/vbLbjY

    <p id="sendMe"  onclick="myFunky()" contenteditable="true">
      Highlight all of the text you see here, including this and delete 
      it, and this, then enter a message..click send!
    </p><br>

    <button class="button" onclick="myFun()">Send</button><br>

    <textarea onclick="myFunk()" id="message" rows="4" cols="50" readonly>           
   </textarea>

    <script>

      function myFunk() {

        document.getElementById("message").innerHTML = "Please delete the 
        above    line 'Highlight all of the text you see here, including 
        this and delete it, and this, then enter a message..click send!'. 
        Thank you!"
      }

      function myFunky() {

        document.getElementById("sendMe").style.color = "black";
        document.getElementById("message").innerHTML= "That's It!";
      }

      function myFun() {
        document.getElementById("sendMe").style.color = "blue";
        document.getElementById("message").style.color = "red";

        var str = document.getElementById("sendMe").innerHTML;
        var x = str.valueOf();
        var y = str.length;
        var n = str.includes("Highlight all of the text you see here, including  this and delete it, and this, then enter a message..click send!");


        if (n == true) {

          document.getElementById("message").innerHTML ="Delete the above line &    write a text!";
        } else if (x == 0) {
          alert ("That was Blank!");
          document.getElementById("message").innerHTML ="Don't be shy! Come on  write some text!!";
        } else {

          document.getElementById("message").innerHTML = "Your text:  " 
          +str+ "    was recorded momentarily";
          document.getElementById("message").style.color = "green";
          document.getElementById("sendMe").innerHTML = ""
          alert ("Thank you for your time and text: " +str + "  the
          string.length of your text = " + y + " characters in length.");
        }
      };

    </script>

3 个答案:

答案 0 :(得分:1)

您的文本区域包含字符。保持空白为空

-------------------------------------------------------------------------------------------------- Acura SUV, Average MSRP:$36,945 Drive Engine Obs Model Origin Train Size Cylinders MSRP 1 MDX Asia All 3.5 6 $36,945 -------------------------------------------------------------------------------------------------- Acura Sedan, Average MSRP:$34,772 Drive Engine Obs Model Origin Train Size Cylinders MSRP 2 RSX Type S 2dr Asia Front 2.0 4 $23,820 3 TSX 4dr Asia Front 2.4 4 $26,990 4 TL 4dr Asia Front 3.2 6 $33,195 5 3.5 RL 4dr Asia Front 3.5 6 $43,755 6 3.5 RL w/Navigation 4dr Asia Front 3.5 6 $46,100 -------------------------------------------------------------------------------------------------- Acura Sports, Average MSRP:$89,765 Drive Engine Obs Model Origin Train Size Cylinders MSRP 7 NSX coupe 2dr manual S Asia Rear 3.2 6 $89,765 -------------------------------------------------------------------------------------------------- etc …

您可以see it in action here

编辑:添加结果enter image description here

的图像

答案 1 :(得分:1)

<body style="background-color:yellow;">

<p id="sendMe" onclick="myFunky()" contenteditable="true">Highlight all of the   text you see here, including this and delete it, and this, then enter a message..click send!</p><br>

<button class="button" onclick="myFun()">Send</button><br>

<textarea onclick="myFunk()" id="message" rows="4" cols="50" readonly> </textarea>




function myFunk() {

document.getElementById("message").innerHTML = "Please delete the above line    'Highlight all of the text you see here, including this and delete it, and this, then enter a message..click send!'. Thank you!"
}
function myFunky() {

document.getElementById("sendMe").style.color = "black";
document.getElementById("message").innerHTML= "That's It send me a text!";
}

function myFun() {
document.getElementById("sendMe").style.color = "blue";
document.getElementById("message").style.color = "red";

var str = document.getElementById("sendMe").innerHTML;
var x = str.valueOf();
var y = str.length;
var v = str.includes("<br>");
var n = str.includes("Highlight all of the text you see here, including this  and delete it, and this, then enter a message..click send!");


if (v==true || y==0) {
document.getElementById("message").innerHTML ="Write a text!!";
alert ("Don't be cheeky ! That was a blank text!");

} else if (n==false){

document.getElementById("message").innerHTML = "Your text:  " +str+ " was   recorded momentarily";
document.getElementById("message").style.color = "green";
document.getElementById("sendMe").innerHTML = ""
alert ("Thank you for your time and text: " +x);
}

else {


alert ("You haven't sent a message");
document.getElementById("message").innerHTML ="Don't be shy! Come on write some    text!!";

}
};

答案 2 :(得分:0)

<body id="Bground" onclick="myFunky()" style="background-color:#ff3110;">
<h4> Please send me a message!</h4> <h5>Text me on the dotted line:</h5>

<p id="sendMe"  onclick="myFunky()" contenteditable="true" style="border- bottom:dotted; width:500px"></p><br>

<button class="button" onclick="myFun()">Send</button><br>

<textarea id="message" rows="4" cols="50" readonly></textarea>

function myFunky() {
document.getElementById("Bground").style.backgroundColor = "white";
document.getElementById("sendMe").style.backgroundColor = "red";
document.getElementById("sendMe").style.color = "white";
document.getElementById("message").innerHTML= "That's It!";
}

function myFun() {
document.getElementById("sendMe").style.color = "blue";
document.getElementById("message").style.color = "red";

var str = document.getElementById("sendMe").innerHTML;
var x = str.valueOf();
var y = str.length;
//var n = str.includes("Highlight all of the text you see here, including  this  and delete it, and this, then enter a message..click send!");


if (y == 0){
document.getElementById("message").innerHTML ="You have not entered any text!";
alert ("Please enter some text to send! Make it snappy!")
} else if (x==0){

alert ("That was Blank!"+str.length);
document.getElementById("message").innerHTML ="Don't be shy! Come on  write some text!!";
}

else {

document.getElementById("message").innerHTML = "Your text:>  " +str+ " <:was  recorded momentarily";
document.getElementById("message").style.color = "green";
document.getElementById("sendMe").innerHTML = ""
alert ("Thank you for your time! Your Text:> " +str+ " <:has been received!");

}
};