Question

我需要使用CSS或JavaScript设置<input>的插入符号。 CSS3可能无法实现，所以我怎么能用JavaScript做到这一点？

然后最终public class MyFragment extends Fragment { OnFragmentCloseListener mCallback; // Container Activity must implement this interface public interface OnFragmentCloseListener { public void onClosed(Bundle data); } //call this while closing the fragment Bundle data = new Bundle(); data.putExtra("key"," value"); mCallback.onClosed(data); @Override public void onAttach(Activity activity) { super.onAttach(activity); // This makes sure that the container activity has implemented // the callback interface. If not, it throws an exception try { mCallback = (OnFragmentCloseListener) activity; } catch (ClassCastException e) { throw new ClassCastException(activity.toString() + " must implement OnFragmentCloseListener "); } } }应如上图所示。

Answer 1

它被称为 Caret 。你不能使用CSS来设置它，但是使用JavaScript，你可以模仿它：

function $(elid) {
  return document.getElementById(elid);
}

var cursor;
window.onload = init;

function init() {
  cursor = $("cursor");
  cursor.style.left = "0px";
}

function nl2br(txt) {
  return txt.replace(/\n/g, "<br />");
}

function writeit(from, e) {
  e = e || window.event;
  var w = $("writer");
  var tw = from.value;
  w.innerHTML = nl2br(tw);
}

function moveIt(count, e) {
  e = e || window.event;
  var keycode = e.keyCode || e.which;
  //				alert(count);
  if (keycode == 37 && parseInt(cursor.style.left) >= (0 - ((count - 1) * 10))) {
    cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
  } else if (keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0) {
    cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
  }

}

function alert(txt) {
  console.log(txt);
}

body {
  margin: 0px;
  padding: 0px;
  height: 99%;
}
textarea#setter {
  left: -1000px;
  position: absolute;
}
.cursor {
  font-size: 12px;
  background-color: blue;
  color: blue;
  position: relative;
  opacity: 0.5;
  height: 1.5em;
  width: 3px;
  max-width: 3px;
  overflow: hidden;
  text-indent: -5px;
  display: inline-block;
  text-decoration: blink;
  animation: blinker 1s linear infinite;
}
#terminal {
  margin: 8px;
  cursor: text;
  height: 500px;
  overflow: auto;
}
#writer {
  font-family: cursor, courier;
  font-weight: bold;
}
#getter {
  margin: 5px;
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}

<div id="terminal" onclick="$('setter').focus();">
  <textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>
  <div id="getter">
    <span id="writer"></span><b class="cursor" id="cursor">B</b>
  </div>
</div>

我已经从Emulating a terminal-like caret with JavaScript and CSS获取了代码，并根据您的要求对其进行了修改。

如何制作定制插入符号？

1 个答案: