ホームページ > ウェブフロントエンド > jsチュートリアル > js_javascriptスキルでテキストエリアを操作する一般的な方法のまとめ

js_javascriptスキルでテキストエリアを操作する一般的な方法のまとめ

WBOY
リリース: 2016-05-16 17:47:30
オリジナル
987 人が閲覧しました

DOM上のテキストエリア内の文字を操作するのはさらに面倒です。
このパッケージを皆さんと共有するために、IE6、8、Firefox、Chrome、Opera、Safari でテストしました。互換性は問題ありません。
注: Firefox で文字列を追加すると、scrollTop が 0 に等しくなるというバグがあります。もちろん解決されていますが、完全ではありません。研究された専門家がいらっしゃいましたら、アドバイスをお願いいたします。

コードをコピー コードは次のとおりです:

var TT = {
/*
* カーソル位置を取得
* @Method getCursorPosition
* @param t element
* @return number
*/
getCursorPosition: function(t){
if (document .selection) {
t.focus();
var ds = document.selection;
var storage_range = range.duplicate(); storage_range.moveToElementText (t);
stored_range.setEndPoint("EndToEnd", range);
t.selectionStart = storage_range.text.length - range.text.length; range.text .length;
return t.selectionStart;
} else return t.selectionStart
},
/*
* カーソル位置を設定
* @Method setCursorPosition
* @param t 要素
* @param p 番号
* @return
*/
setCursorPosition:function(t, p){
this.sel(t,p,p);
},
/*
* カーソルの後に挿入
* @Method add
* @param t element
* @param txt String
* @return
*/
add:function (t, txt){
var val = t.value;
if(document.selection){
t.focus()
document.selection.createRange ().text = txt>} else {
var cp = t.value.length;
var s = t.scrollTop; document.getElementById ('aaa').innerHTML = s '
';
t.value = t.value.slice(0,t.selectionStart) txt t.value.slice(t.selectionStart) , ubbLength) ;
this.setCursorPosition(t, cp txt.length)
// document.getElementById('aaa').innerHTML '
'; firefox=navigator .userAgent.toLowerCase().match(/firefox/([d.] )/) && setTimeout(function(){
if(t.scrollTop != s) t.scrollTop=s;
}, 0)
};
},
/*
* カーソルの前後 n 文字を削除
* @Method del
* @param t element
* @ param n number n>0 の後に n* @return
* 値をリセットすると、scrollTop の値は 0 にクリアされます
*/
del:function (t, n){
var p = this.getCursorPosition(t);
var val = t.value = n > 0 ? val.slice(0 , p - n) val.slice(p):
val.slice(0, p) val.slice(p - n);
this.setCursorPosition(t ,p - ( n firefox=navigator.userAgent.toLowerCase().match(/firefox/([d.] )/) && setTimeout(function(){
if(t) .scrollTop != s) t.scrollTop=s;
},10)
},
/*
* s から z の位置までのテキストを選択します
* @Method sel
* @param t 要素
* @param s 番号
* @param z 番号
* @return
*/
sel:function(t, s, z){
if(document.selection){
var range = t.createTextRange();
range.moveEnd('character', -t.value.length);
range.moveEnd('character', z) );
range.moveStart('character', s);
}else{
t.setSelectionRange(s,z); );
}
},
/*
* 文字列を選択
* @Method sel
* @param t element
* @param s String
* @return
* /
selString:function(t, s){
varindex = t.value.indexOf(s);
index != -1 ? 、インデックス s.length) : false;
}
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート