[英]Clear default text from <p> tag when clicked on
With this fiddle: http://jsfiddle.net/2mw4c/12/ 有了这个小提琴: http : //jsfiddle.net/2mw4c/12/
I would like to be able to clear the text from the <p>
tag, and begin to start typing. 我希望能够清除
<p>
标记中的文本,并开始输入内容。 The problem I am having is that when you click, the <p>
tag gets cleared, and I can't type in it. 我遇到的问题是,当您单击时,
<p>
标记会被清除,而我无法键入它。
JavaScript: JavaScript:
$("p").on("mousedown", function(e){
if($(this).text() === "Click"){
$(this).text("").focus();
}
});
HTML: HTML:
<div class="content" contenteditable="true"><p>Click</p></div>
What do I need to be able to do to start writing in the tag? 我需要做什么才能开始写标签?
I don't know exactly what you're trying to achieve, but it worked for me when I moved the contenteditable
to the p
element. 我不知道您到底想达到什么目的,但是当我将
contenteditable
移到p
元素时,它对我contenteditable
。
The impression I'm getting from your comments is that you want to keep the current structure in your markup. 我从您的评论中得到的印象是您希望将当前结构保留在标记中。 It seems that the
div
is collapsing due to the p
being empty. 由于
p
为空,似乎div
正在崩溃。 I've updated my fiddle link. 我更新了我的小提琴链接。
http://jsfiddle.net/nyaray/2UJRS/2/ http://jsfiddle.net/nyaray/2UJRS/2/
$("p").on("mousedown", function (e) {
var that = $(this);
var txt = that.text();
if (txt === "Click") {
height = that.css('height');
that.css('height', height).text("").focus();
} else if ((txt).length) {
that.css('height', 'inherit');
} else if (txt.length === 0) {
that.css('height', height);
}
});
You can set a minimum height and width. 您可以设置最小高度和宽度。 You need to specify the size or else, there will be no clickable area inside the p-tag since in is an inline element.
您需要指定大小,否则,由于in是一个内联元素,因此p标签内将没有可点击区域。
http://jsfiddle.net/MrPolywhirl/WZg6H/ http://jsfiddle.net/MrPolywhirl/WZg6H/
div.content>p {
min-width: 1em;
min-height: 1em;
background: #EEF;
}
I think the tag <p>
you are trying is to use as input so please check the following change: 我认为您尝试使用的标签
<p>
用作输入,因此请检查以下更改:
Try this instead: 尝试以下方法:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.