Переместить точку вставки текста (каретка) на клик - PullRequest
Новая
       25

Переместить точку вставки текста (каретка) на клик

1 голос
/ 23 января 2020

Чтобы улучшить UX, улавливая пропущенные клики в моей форме, я использую следующий код в ограничивающей рамке вокруг каждого текстового поля: 

focusMethod = function getFocus() {           
  document.getElementById("myTextField").focus();
}

Это хорошо работает при установке фокуса на ближайший текст поле, в котором пользователь щелкнул, даже если оно не находится непосредственно в самом текстовом поле. Однако точка вставки текста (каретка) всегда автоматически размещается на левой стороне ввода, а не на ближайшей точке ввода x.

Используя vanilla JS, как я могу продвинуться еще на один шаг и найти и переместить точку вставки текста (каретку) в максимально возможное место, куда пользователь нажал (если в поле есть текст) )?

Изображения: что у меня сейчас | что я хочу чтобы произошло

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Вы можете достичь этого. Я приготовил что-то, что можно использовать в качестве отправной точки: 

<div id="container">
    <input type="text" id="input">
    <br>
    <br>
</div>
<script type="text/javascript">
var testInput = document.getElementById("input");
var testContainer = document.getElementById("container");
document.getElementById("container").addEventListener("click", function(event) {
    testInput.focus();
  var padding = 0;
  console.log(event.clientX);
  console.log(testInput.getBoundingClientRect().left);
  console.log(testInput.getBoundingClientRect().right);
  if (event.clientX > testInput.getBoundingClientRect().right) padding = (testInput.getBoundingClientRect().right * 0.8);
  else if (event.clientX > testInput.getBoundingClientRect().left) padding = (event.clientX - testInput.getBoundingClientRect().left);
  testInput.style["padding-left"] = padding + "px";
});
</script>

и 

#container {
  width: 90%;
  margin: auto;
  background-color: gray;
}

#input {
  width: 80%;
  margin-top: 100px;
  margin-left: 10%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

См .: https://jsfiddle.net/mLqj17xe/1/

Идея состоит в том, чтобы выяснить, где должен находиться курсор, и использовать его как отступ слева.

0 голосов
/ 23 января 2020

Вы можете наложить какой-то хакерский ввод текста, который больше, а затем использовать позиционирование текста из него для истинного ввода.

В противном случае, действительно, очень трудно определить положение символов ... шрифты странные и я не знаю, как в js точно определить, где они будут. 

const byId = (id) => document.getElementById(id);
const on = (el, event, cb) => el.addEventListener(event, cb);

const textEl = byId("Text");
const hackEl = byId("Hack");

on(textEl, "input", () => hackEl.value = textEl.value);

on(hackEl, "click", () => {
  const charFocusPos = hackEl.selectionStart;
  textEl.focus();
  textEl.selectionStart = textEl.selectionEnd = charFocusPos;
});
#Container {
  position: relative;
  display: inline-block;
}

#Hack {
  transform: translate(-50%, -50%) scaleY(5);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  opacity: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 16px;
  border: none;
  outline: none;
}


#Hack.showOnHover:hover {
  opacity: 0.1;
}

#Hack, #Text {
  font-size: 16px;
  font-family: arial;
}
<div id="Container">
  <input type="textbox" id="Text">
  <input type="textbox" id="Hack"></div>
</div>

<button onClick="byId('Hack').classList.toggle('showOnHover')">Toggle Hack Layer</div>
...