亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶有 :before 偽元素的可編輯 div 中的光標位置

帶有 :before 偽元素的可編輯 div 中的光標位置

12345678_0001 2023-10-10 16:14:10
我有一個可編輯的 div 和:beforecss:after偽元素。:before在 div 中設置提示其作用:after類似于占位符當用戶點擊一個空div時,光標會放置在“提示”內容之前。一旦用戶開始輸入,:after內容就會消失并且光標位于正確的位置。有沒有辦法在選擇空 div 時將光標定位在內容之后?有趣的是,如果 div 中有任何文本,并且您選擇了 div,光標就會移動到末尾(如我所愿)。任何想法/幫助將不勝感激。div[data-prompt][contenteditable=true]:before {  content: attr(data-prompt);  font-family: 'Open Sans', sans-serif;  color: black;}div[data-placeholder]:empty:after {  content: attr(data-placeholder);  color: black;}<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>選擇空div時的光標位置另請注意,“提示”的長度并不總是相同。
查看完整描述

1 回答

?
手掌心

TA貢獻1942條經驗 獲得超3個贊

您可以考慮文本縮進和一些翻譯來控制光標位置。僅當 div 為:empty


div[data-prompt][contenteditable=true]:before {

  content: attr(data-prompt);

  font-family: 'Open Sans', sans-serif;

  color: black;

}


div[data-placeholder]:empty:after {

  content: attr(data-placeholder);

  color: black;

  /* added */

  display: inline-block;

  transform: translateX(-28px);

  text-indent: 0;

  /**/

}


/* added */

div[data-placeholder]:empty {

  text-indent: 38px;

}

div[data-prompt][contenteditable=true]:empty:before {

  display: inline-block;

  transform: translateX(-37px);

  text-indent: 0;

}

/**/


div[data-prompt][contenteditable=true] {

  border: 1px solid;

}

<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

對于更通用的方式,您可以依賴 CSS 變量:


div[data-prompt][contenteditable=true]:before {

  content: attr(data-prompt);

  font-family: 'Open Sans', sans-serif;

  color: black;

}


div[data-placeholder]:empty:after {

  content: attr(data-placeholder);

  color: black;

  /* added */

  display: inline-block;

  transform: translateX(calc(10px - var(--d)));

  text-indent: 0;

  /**/

}


/* added */

div[data-placeholder]:empty {

  text-indent: var(--d);

}

div[data-prompt][contenteditable=true]:empty:before {

  display: inline-block;

  transform: translateX(calc(1px - var(--d)));

  text-indent: 0;

}

/**/


div[data-prompt][contenteditable=true] {

  border: 1px solid;

}

<div style="--d:37px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>



<div style="--d:64px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will not " data-placeholder="..."></div>


查看完整回答
反對 回復 2023-10-10
  • 1 回答
  • 0 關注
  • 142 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號