第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

帶有 :before 偽元素的可編輯 div 中的光標(biāo)位置

帶有 :before 偽元素的可編輯 div 中的光標(biāo)位置

12345678_0001 2023-10-10 16:14:10
我有一個(gè)可編輯的 div 和:beforecss:after偽元素。:before在 div 中設(shè)置提示其作用:after類似于占位符當(dāng)用戶點(diǎn)擊一個(gè)空div時(shí),光標(biāo)會(huì)放置在“提示”內(nèi)容之前。一旦用戶開始輸入,:after內(nèi)容就會(huì)消失并且光標(biāo)位于正確的位置。有沒有辦法在選擇空 div 時(shí)將光標(biāo)定位在內(nèi)容之后?有趣的是,如果 div 中有任何文本,并且您選擇了 div,光標(biāo)就會(huì)移動(dòng)到末尾(如我所愿)。任何想法/幫助將不勝感激。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時(shí)的光標(biāo)位置另請注意,“提示”的長度并不總是相同。
查看完整描述

1 回答

?
手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以考慮文本縮進(jìn)和一些翻譯來控制光標(biāo)位置。僅當(dāng) 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>


查看完整回答
反對 回復(fù) 2023-10-10
  • 1 回答
  • 0 關(guān)注
  • 154 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)